企业网站建设视频教程做网站的知名品牌公司

当前位置： 首页 > news >正文

企业网站建设视频教程,做网站的知名品牌公司,河北石家庄有什么好玩的地方,做购物网站多少钱 知乎目录 第一章、常用设置的api 1.1 tabBar导航配置 1.2 subPackages分包配置 1.3 enablePullDownRefresh下拉刷新配置 1.4 onReachBottomDistance上拉刷新配置 第二章、页面常用逻辑api 2.1请求数据 2.1.1 网络请求uni.request 2.2 文件上传与下载(图片、文件…) 2.2.1…目录 第一章、常用设置的api 1.1 tabBar导航配置 1.2 subPackages分包配置 1.3 enablePullDownRefresh下拉刷新配置 1.4 onReachBottomDistance上拉刷新配置 第二章、页面常用逻辑api 2.1请求数据 2.1.1 网络请求uni.request 2.2 文件上传与下载(图片、文件…) 2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument 2.2.2 图片上传chooseImage与下载downloadFile 2.3 页面跳转 2.3.1 跳转到非tabBar页面navigateTo 2.3.2 跳转到tabBar页面navigateTo 2.3.3 针对非tabBar的页面回退navigateBack 2.4 数据缓存 2.4.1 本地存储指定的键值对setStorage与setStorageSync 2.4.2 获取本地存储键对应的值getStorage与getStorageSync 2.4.3 移除缓存removeStorage与removeStorageSync 2.4.4 清空缓存clearStorage与clearStorageSync 2.5 位置 2.5.1 配置地图详细信息 2.5.2 获取位置getLocation 2.5.3 打开地图选择位置chooseLocation 2.5.4 使用应用内置地图查看位置openLocation 2.6 页面的交互反馈 2.6.1 显示/隐藏消息框showToast/hideToast 2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading 2.6.3 显示模态弹窗showModal 第一章、常用设置的api 1.1 tabBar导航配置 其目标就是设置小程序的导航栏 tabBar: {selectedColor: #c00000, //选中时的颜色list: [{pagePath: pages/home/home, //tabBar路径text: 首页, // tabBar文字iconPath: static/tab_icons/home.png, // 未选中时的图片颜色selectedIconPath: static/tab_icons/home-active.png //选中时的图片颜色},{pagePath: pages/cate/cate,text: 分类,iconPath: static/tab_icons/cate.png,selectedIconPath: static/tab_icons/cate-active.png},{pagePath: pages/my/my,text: 我的,iconPath: static/tab_icons/my.png,selectedIconPath: static/tab_icons/my-active.png}]} 1.2 subPackages分包配置 设置分包一些暂时未打开的页面等下次需要加载该页面的时候再加载也是一种优化 subPackages: [{root: subpkg, //根目录pages: [ {path : goods/goods, //再文件夹subpkg配置对应的路径style :{navigationBarTitleText: 商品信息,enablePullDownRefresh: false} },{path : goods_list/goods_list,style : {navigationBarTitleText: 商品列表,enablePullDownRefresh: true,onReachBottomDistance: 150,backgroundColor: #007AFF} },{path : search/search,style : {navigationBarTitleText: 搜索页面,enablePullDownRefresh: false} }]}], 1.3 enablePullDownRefresh下拉刷新配置 开启下拉刷新enablePullDownRefresh: true {path : goods_list/goods_list,style : {navigationBarTitleText: 商品列表,enablePullDownRefresh: true, //开启下拉刷新backgroundColor: #007AFF //开启之后的一些设置}
}, 1.4 onReachBottomDistance上拉刷新配置 设置上拉刷新距离底部多长记录进行上拉刷新 {path : goods_list/goods_list,style : {navigationBarTitleText: 商品列表,onReachBottomDistance: 150, //开启上拉刷新}
} 第二章、页面常用逻辑api 2.1请求数据 2.1.1 网络请求uni.request button clickapiRequest请求接口/button apiRequest(){let url https://apirequest LOVE snow.net;//网络请求apiuni.request({url:url, // 请求路径data:{}, // 参数header:{}, // 请求头method:GET, // 请求方法timeout:10000, // 超时请求dataType:json,// 默认json请求数据类型success: (res) { // 成功时的回调console.log(res);},fail: (err) { // 失败时的回调console.log(JSON.stringify(err));}}) }2.2 文件上传与下载(图片、文件…) App支持多文件上传微信小程序只支持单文件上传支持多图上传 2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument button clickonuploadFlie文件上传/button button clickondownloadFile下载/button//上传文件 onuploadFlie(){uni.chooseFile({count: 1, //默认100type:file, //仅H5支持extension:[.doc, .docx, .pdf, .pptx, .ppt, .xls, .xlsx,.zip], //选择上传文件的格式success: function (res) {console.log(JSON.stringify(res.tempFilePaths));}}); } //下载文件并打开文件 ondownloadFile(){uni.downloadFile({url: https://www.example.com/file/test, //下载文件的路径success: (res) {var filePath res.tempFilePath; //文件路径uni.openDocument({ //打开下载完成的路径filePath: filePath, //文件路径showMenu: true,success: function (res) {console.log(打开文档成功);}});} }); } 2.2.2 图片上传chooseImage与下载downloadFile button clickonuploadphoto图片上传/button button clickondownload下载/button image :srcdownloadfile stylewidth: 300rpx;height: 270rpx; modeaspectFill/image data() {return {downloadfile:} }, onuploadphoto(){ //上传图片uni.chooseImage({count:1, // 上传图片的数量sizeType:[original, compressed], //可以指定是原图还是压缩图默认二者都有sourceType:[album], //从哪里选择图片(案例从相册选择)success: (res) {console.log(JSON.stringify(res)); // 成功了查看图片信息},fail: () {console.log(JSON.stringify(err));}}) }, ondownload(){ //下载图片uni.downloadFile({ url:https://www.example.com/file/test, // 这里是图片接口地址 直接 url拼接参数可timeout:30000, //超时headers:{} , //是否需要携带请求头methods:GET/POST, //是否需要添加请求方法success: (res) {console.log(JSON.stringify(res)); //显示图片的信息this.downloadfile res.tempFilePath; //显示图片},fail: (err){console.log(JSON.stringify(err));}}) } 2.3 页面跳转 2.3.1 跳转到非tabBar页面navigateTo uni.navigateTo({url:url }); 2.3.2 跳转到tabBar页面navigateTo uni.switchTab({url: /pages/index/index }); 2.3.3 针对非tabBar的页面回退navigateBack uni.navigateBack({delta: 2 }); uni.navigateBack() //默认delta回退1时不用写 2.4 数据缓存 2.4.1 本地存储指定的键值对setStorage与setStorageSync 使用setStorageSync(同步存储) //一般使用该方法 uni.setStorageSync(key,value) –同步uni.setStorage(key,value) –异步 2.4.2 获取本地存储键对应的值getStorage与getStorageSync 使用的getStorageSync(同步获取) //一般使用该方法 uni.getStorageSync(key)uni.getStorage(key) 2.4.3 移除缓存removeStorage与removeStorageSync //一般使用该方法 uni.removeStorageSync(key)uni.removeStorage(key) 2.4.4 清空缓存clearStorage与clearStorageSync //一般使用该方法 uni.clearStorageSync()uni.clearStorage() 2.5 位置 2.5.1 配置地图详细信息 uniapp腾讯地图/高德地图开发 uniapp官方文档map组件map | uni-app官网 腾讯地图官方文档微信小程序JavaScript SDK | 腾讯位置服务 高德地图官方文档概述-iOS 地图SDK | 高德地图API 腾讯地图注册—登录—控制台—开发文档—微信小程序—申请密钥—创建应用—自行命名以及选择功能—添加key—key的名称自行命名—选择微信小程序—输入APPID:wxce1cc86465385309—添加开通webserviceAPI服务控制台-应用管理-我的应用-添加key-勾选webserviceAPI-保存即可补充腾讯地图key的选项下载微信小程序javaScriptSDK v1.1/v1.2—最后配置小程序请求域名https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 2.5.2 获取位置getLocation 返回的是经纬度 button clickonGeteLocal获取地图位置/buttononGetLocal(){uni.getLocation({type: wgs84, //默认为 wgs84 返回 gps 坐标success: function (res) { //必填console.log(当前位置的经度 res.longitude);console.log(当前位置的纬度 res.latitude);}}); } 2.5.3 打开地图选择位置chooseLocation button clickonChooseLocal打开地图选择位置/buttononChooseLocal(){uni.chooseLocation({success: (res) {console.log(位置名称 res.name);console.log(详细地址 res.address);console.log(纬度 res.latitude);console.log(经度 res.longitude);}}) }2.5.4 使用应用内置地图查看位置openLocation uni.getLocation({type: gcj02, //返回可以用于uni.openLocation的经纬度success: function (res) {const latitude res.latitude; //获取经度const longitude res.longitude; //获取纬度uni.openLocation({latitude: latitude, //经度longitude: longitude, //纬度success: function () { //成功console.log(success);}});} }); 2.6 页面的交互反馈 2.6.1 显示/隐藏消息框showToast/hideToast uni.showToast({title: 标题, //标题 (必填)duration: 2000, //延迟时间icon: loading, //图标image: , //自定义图标路径mask:true //是否显示透明蒙层防止触摸穿透默认falseposition: center //位置仅app生效success: (res) {console.log(res);} });uni.hideToast(); 2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading uni.showLoading({title: 加载中mask:true //是否显示透明蒙层防止触摸穿透默认false });setTimeout(function () {uni.hideLoading(); }, 2000); 2.6.3 显示模态弹窗showModal 显示模态弹窗可以只有一个确定按钮也可以同时有确定和取消按钮。 button clickonShowModel显示提示框/buttononShowModel(){uni.showModal({title:提示标题, //提示标题content:这是提示内容, //提示内容showCancel:false, //是否展示取消按钮默认为truecancelText: 取消, //取消按钮的文字默认为取消confirmText:确定, //确定按钮的文字默认为确定editable:true, //是否显示输入框success: (res) {console.log(res);if(res.confirm){ //点击确定时 做后续操作console.log(确定); //例如发送请求啊等等}}}) } 第三章、调用手机功能的api 3.1 扫码二维码 uni.scanCode button clickscan点我扫一扫/buttonscan(){uni.scanCode({scanType: [barCode,qrCode], //识别二维码的类型onlyFromCamera: false, //是否只允许扫描(扫描/扫描相册)success: function (res) {console.log(条码类型 res.scanType);console.log(条码内容 res.result);}}); }, 3.2 点击拨打电话号码  text selectable clickcall177*5849/textcall(){uni.makePhoneCall({phoneNumber: 177*5849 //需要拨打的手机号}); } 更具体请看官网 uniapp官网api文档uni-app官网