2014网站建设,语音识别程序代做网站,wordpress 打赏 手机,免费做网站公司哪家好文章目录 1. 基本组件的使用1. text文本组件的使用2. view视图容器组件的使用3. button按钮组件的使用4. image组件的使用5. map组件 2. uni-app中的样式1. uni-app#xff1a;px2rpx计算 3. uni-app的数据绑定1. 基本的数据绑定2. v-bind,v-for,v-on 4. uni-app的生命周期1. … 文章目录 1. 基本组件的使用1. text文本组件的使用2. view视图容器组件的使用3. button按钮组件的使用4. image组件的使用5. map组件 2. uni-app中的样式1. uni-apppx2rpx计算 3. uni-app的数据绑定1. 基本的数据绑定2. v-bind,v-for,v-on 4. uni-app的生命周期1. uni-app 应用的生命周期2. 页面的生命周期3. onPullDownRefresh: 监听下拉刷新4. onReachBottom: 上拉加载 5. 网络请求1. 发送请求: uni-app 原生api2. 项目封装http.js 发送请求文件路径lib/http/index.jslib/http.jslib/request.js 6. 数据缓存1. 异步uni.setStorage同步setStorageSync2. 异步uni.getStorage同步getStorageSync3. 异步uni.removeStorage同步removeStorageSync 7. 图片的上传和预览1. uni.chooseImage(object): 图片上传2. uni.previewImage(object): 图片预览3. camera组件 8. 条件编译跨端兼容9. uni中导航的跳转和传参1. 使用navigator组件进行跳转2. 使用编程式导航进行跳转3. 项目封装的 $navigate 进行跳转 10. 组件的创建和生命周期11. 组件通讯12、小程序运行含未引入组件报错 1. 基本组件的使用
uni-app提供了丰富的基础组件给开发者开发者可以像搭建积木一样组合各种组件拼接成自己的应用 uni-app中的组件就像html中的div,p,span等标签的作用一样用于搭建页面的基础结构 https://uniapp.dcloud.net.cn/component
1. text文本组件的使用
属性类型默认值必填说明selectabelbooleanfalse否文本是否可选spacestring否显示连续空格可选参数 ensp,emsp,nbsp ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小decodebooleanfalse否是否解码支持5APP,H5,微信小程序
•text组件相当于行内标签在同一行显示(相当于span标签) •除了文本节点以外的其他节点都无法长按选中 • 组件内只支持嵌套 不支持其它组件或自定义组件否则会引发在不同平台的渲染差异。但text嵌套text在小程序中布局是有问题的。所以不推荐text嵌套组件 texttext组件/text!-- text 组件使用 --texttext嵌套/text/textview!-- 长按可选中文本 --text selectable详情页呀详情页/text/viewview!-- 显示连续空格 --view!-- ensp 两个个空格一个字符大小 --text spaceensp详情页呀 详情页/text/viewview!-- emsp 一个空格一个字符大小 --text spaceemsp详情页呀 详情页/text/viewview!-- nbsp 三个空格一个字符大小 --text spacenbsp详情页呀 详情页/text/view/viewview!-- 解码 --text decodeamp;/texttext decode selectablelambda;/text/view2. view视图容器组件的使用
类似于HTML的div 组件属性
属性类型默认值必填说明hover-classstringnone否指定按下去的样式类当hover-class“none”,没有点击效果hover-stop-propagationblooeanfalse否指定是否阻止本阶段的祖先阶段出现点击态hover-start-timenumber50否按住后多久出现点击态单位毫秒hover-stay-timenumber400否手指松开后点击态保留事件单位毫秒
!-- view 组件使用 --
view classf-content hover-classf-activeview classcontent hover-classcontent-active :hover-stop-propagationtrue :hover-stay-time1000呀哈哈/view
/view3. button按钮组件的使用
组件属性
属性类型默认值说明sizestringdefault按钮的大小可选defaultminitypeStringdefault按钮的样式类型可选primarydefaultwarnplainBooleanfalse按钮式否镂空背景色透明disabledBooleanfalse按钮是否可点击loadingBooleanfalse按钮名称是否显示loading图标状态
type - primary: 微信小程序、360小程序为绿色App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色字节跳动小程序为红色QQ小程序为浅蓝色。如想在多端统一颜色请改用default然后自行写样式 - default: 白色 - warn: 红色
viewtextbutton组件/textbutton呀哈哈/buttonbutton sizemini typewarn呀哈哈/buttonbutton typeprimary呀哈哈/buttonbutton typeprimary plain呀哈哈/buttonbutton typeprimary disabled呀哈哈/buttonbutton typeprimary plain loading呀哈哈/button
/view4. image组件的使用
组件属性
属性类型默认值说明平台差异说明srcstring图片资源地址仅支持相对路径、绝对路径支持 base64 码modeStringscaleToFill图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效微信小程序、百度小程序、字节跳动小程序、飞书小程序fade-showBooleantrue图片显示动画效果仅App-nvue 2.3.4 Android有效webpBooleanfalse在系统不支持webp的情况下是否单独启用webp。默认false只支持网络资源。微信小程序2.9.0show-menu-by-longpressBooleanfalse开启长按图片显示识别小程序码菜单微信小程序2.7.0draggableBooleantrue是否能拖动图片H5 3.1.1、AppiOS15errorHandleEvent当错误发生时发布到 AppService 的事件名事件对象event.detail {errMsg: ‘something wrong’}loadHandleEvent当图片载入完毕时发布到 AppService 的事件名事件对象event.detail {height:‘图片高度px’, width:‘图片宽度px’}
mode常用缩放 1、缩放: aspectFit 保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。 2、缩放: aspectFill 保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。 3、缩放scaleToFill 不保持纵横比缩放图片使图片的宽高完全拉伸至填满 image 元素 4、缩放 widthFix 宽度不变高度自动变化保持原图宽高比不变 5、缩放 heightFix 高度不变宽度自动变化保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3 支持、微信小程序需要基础库 2.10.3 6、裁剪 top 不缩放图片只显示图片的顶部区域 7、裁剪 bottom 不缩放图片只显示图片的底部区域 8、裁剪 center 不缩放图片只显示图片的中间区域 - 裁剪 left 不缩放图片只显示图片的左边区域 - 裁剪 right 不缩放图片只显示图片的右边区域 9、裁剪 top left 不缩放图片只显示图片的左上边区域 - 裁剪 top right 不缩放图片只显示图片的右上边区域 - 裁剪 bottom left 不缩放图片只显示图片的左下边区域 10、裁剪 bottom right 不缩放图片只显示图片的右下边区域
viewtextimage组件/text!-- 缩放:aspectFit 保持纵横比缩放图片使图片的长边能完全显示出来。也就是说可以完整地将图片显示出来。 --!-- 缩放: aspectFill 保持纵横比缩放图片只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向是完整的另一个方向将会发生截取。 --image srchttp://destiny001.gitee.io/image/cxk.gif/imageimage srchttp://destiny001.gitee.io/image/cxk.gif modeaspectFit/imageimage srchttp://destiny001.gitee.io/image/cxk.gif modeaspectFill/image
/view5. map组件
参考【uni-app】申请高德地图key封装map.js实现H5、iOS、Android通过getlocation获取地图定位信息
2. uni-app中的样式 rpx 即响应式px, 一种根据平面宽度自适应的动态单位。以750宽的平面为基准750rpx恰好为屏幕宽度。屏幕变宽rpx实际显示效果会等比放大 使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用;表示语句结束 支持基本常用的选择器class,id,element第 在uni-app中不支持使用*选择器 page相当于body节点 定义在APP.vue中的样式为全局样式作用于每一个页面。在page目录下的vue文件中定义的样式为局部样式只作用在对应的页面并会覆盖APP.vue中相同的选择器 uni-app支持使用字体图标使用方式与普通web项目相同需要注意 字体文件小于40kb,uni-app会自动将其转化为base64格式 字体文件大于等于40kb, 需开发者自己转换否则不生效 字体文件的引用路径推荐使用~开通的绝对路径
font-face {
font-family: test-icon;
src:url(~/static/iconfont.ttf);
}如何使用scss或者less
view classbox呀哈哈text classiconfont icon-tupian icon/text
/view
style langscss
import url(./style.css);
.box{width: 375rpx;height: 375rpx;background-color: gray;font-size: 16rpx;color: #fff;.icon{color: red;}
}
/style
!-- App.vue 全局样式 --
style/*每个页面公共css */import url(./static/fonts/iconfont.css);
/style1. uni-apppx2rpx计算
rpx和px的区分和转换 开发者可以通过设计稿基准宽度计算页面元素 rpx 值设计稿 1px 与框架样式 1rpx 转换公式如下 设计稿 1px / 设计稿基准宽度 框架样式 1rpx / 750rpx 换言之页面元素宽度在 uni-app 中的宽度计算公式 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 举例说明 若设计稿宽度为 750px元素 A 在设计稿上的宽度为 100px那么元素 A 在 uni-app 里面的宽度应该设为750 * 100 / 750结果为100rpx。
若设计稿宽度为 640px元素 A 在设计稿上的宽度为 100px那么元素 A 在 uni-app 里面的宽度应该设为750 * 100 / 640结果为117rpx。
若设计稿宽度为 375px元素 B 在设计稿上的宽度为 200px那么元素 B 在 uni-app 里面的宽度应该设为750 * 200 / 375结果为400rpx。 注意:
rpx 是和宽度相关的单位屏幕越宽该值实际像素越大。如不想根据屏幕宽度缩放则应该使用 px 单位。如果开发者在字体或高度中也使用了 rpx 那么需注意这样的写法意味着随着屏幕变宽字体会变大、高度会变大。如果你需要固定高度则应该使用px - rpx不支持动态横竖屏切换计算使用rpx建议锁定屏幕方向 - 设计师可以用 iPhone6 作为视觉稿的标准
3. uni-app的数据绑定
1. 基本的数据绑定
基本的数据绑定和vue一致
templateview{{数据绑定}}view{{name}}/viewview{{hello word}}/viewview{{23}}/viewview{{flag?哦嚯嚯:咦嘻嘻}}/view!-- v-bind --image v-bind:srcurl/image!-- image :srcurl/image --!-- v-for --view v-for(item, index) in arr :keyitem.id姓名{{item.name}} --- 年龄{{item.age}}/view!-- v-on --view clickhandleFClick stylewidth: 375rpx;height: 375rpx;background-color: darkcyan;padding: 10rpx;button typeprimary sizemini v-on:click.stophandleClick($event,20)按钮/button!-- button typeprimary sizemini clickhandleClick($event, 20)按钮/button --/view/view
/template
scriptexport default {data() {return {flag:false,name:呀哈哈,}},
/script2. v-bind,v-for,v-on
templateview{{数据绑定}}view{{name}}/viewview{{hello word}}/viewview{{23}}/viewview{{flag?哦嚯嚯:咦嘻嘻}}/view!-- v-bind --image v-bind:srcurl/image!-- image :srcurl/image --!-- v-for --view v-for(item, index) in arr :keyitem.id姓名{{item.name}} --- 年龄{{item.age}}/view!-- v-on --view clickhandleFClick stylewidth: 375rpx;height: 375rpx;background-color: darkcyan;padding: 10rpx;button typeprimary sizemini v-on:click.stophandleClick($event,20)按钮/button!-- button typeprimary sizemini clickhandleClick($event, 20)按钮/button --/view/view
/templatescriptexport default {data() {return {flag:false,name:呀哈哈,url:http://destiny001.gitee.io/image/cxk.gif,arr:[{id:1,age:10,name:呀哈哈},{id:2,age:12,name:哟嚯嚯},{id:3,age:18,name:哦呵呵}]}},methods: {handleClick(e, num){console.log(子-按钮点击,e, num);},handleFClick(){console.log(父-冒泡点击);}}}
/scriptstyle langscss
/style4. uni-app的生命周期
1. uni-app 应用的生命周期
生命周期一个对象从创建、运行、销毁的整个过程被称为生命周期 生命周期函数在生命周期宏每个阶段都会伴随着每一个函数的触发这些函数被称为生命周期函数 uni-app支持如下应用生命周期函数
函数名说明onLaunch当uni-app初始化完成时触发(全局只触发一次)onShow当uni-app启动或从后台进入前台显示onHide当uni-app从前台进入后台onError当uni-app报错时触发
应用的生命周期写在App.vue中
scriptexport default {onLaunch: function() {console.log(App Launch)},onShow: function() {console.log(App Show)},onHide: function() {console.log(App Hide)},onError: function(err) {console.log(err);}}
/script2. 页面的生命周期
页面的生命周期
函数名说明onLoad监听页面加载其参数为上个页面传递的数据参数类型为object(用于页面传参)触发一次onShow监听页面显示。页面每次出现在屏幕上都触发包括从下级页面点返回当前页面 可触发多次onReady监听页面初次渲染完成onHide监听页面隐藏 可触发多次onUnLoad监听页面卸载onPullDownRefresh监听用户下拉动作一般用于下拉刷新onReachBottom页面滚动到底部的事件(不是 scroll-view滚到底)常用于下拉下一页数据onTabItemTap点击 tab 时触发参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
执行顺序onLoad 页面加载 onShow 页面显示 onReady 页面渲染完成
onTabItemTap返回的json对象说明
index: Number 被点击tabItem的序号从0开始pagePath: String 被点击tabItem的页面路径text: String 被点击tabItem的按钮文字
3. onPullDownRefresh: 监听下拉刷新
onPullDownRefresh: 监听用户下拉动作一般用于下拉刷新 在 js 中定义 onPullDownRefresh 处理函数和onLoad等生命周期函数同级监听该页面用户下拉刷新事件。 页面开启下拉刷新方法需要在 pages.json 里找到的当前页面的pages节点并在 style 选项中开启 enablePullDownRefresh。 当处理完数据刷新后 uni.stopPullDownRefresh关闭下拉刷新 可以停止当前页面的下拉刷新。 pages.json:
{path : pages/message/message,style: {navigationBarTitleText: 呀哈哈,enablePullDownRefresh: true }
},uni.startPullDownRefresh(Object): 开启下拉刷新 调用后触发下拉刷新动画效果与用户手动下拉刷新一致。
4. onReachBottom: 上拉加载
onReachBottom: 页面滚动到底部的事件(不是 scroll-view滚到底)常用于下拉下一页数据
templateview touchstartstart touchendend touchmovemoveuni-app 生命周期button clickhandlePullDown下拉刷新/buttonview v-for(item,index) in list :keyindextextname: {{item}} --- index: {{index}}/text/viewu-button v-ifshowTab展示切换tab/u-button/view
/template
scriptexport default {data() {return {showTab:true,startData: {clientX: ,clientY: ,},list:new Array(10).fill().map((item,index)itemmsg_index),}},onPullDownRefresh() {console.log(触发下拉刷新了。);setTimeout((){let addArr Array(10).fill().map((item,index)item msg_(indexthis.list.length));this.list [...this.list,...addArr];uni.stopPullDownRefresh();console.log(下拉刷新结束。);},1000)},onReachBottom() { // 页面上拉触底事件触发时距页面底部距离默认 50pxconsole.log(页面滚动到底部了);let addArr Array(10).fill().map((item,index)item msg_(indexthis.list.length));this.list [...this.list,...addArr];},onLoad(options){console.log(onLoad -- 生命周期页面加载了。);},onShow(){console.log(onShow -- 生命周期页面显示了。);},onReady(){console.log(onReady -- 生命周期页面初次渲染完成了。);},onHide(){console.log(onHide -- 生命周期页面隐藏了。);},methods: {// 下拉刷新handlePullDown(){uni.startPullDownRefresh();},// 触摸touch事件start(e){ //touchstart 触摸开始this.startData.pageX e.changedTouches[0].pageX; //手指按下时的X坐标 this.startData.pageY e.changedTouches[0].pageY; //手指按下时的Y坐标console.log(this.startData, this.startData)},end(){// this.showTab true;},move(event) { //touchmove触摸移动let touch event.touches[0]; //滑动过程中手指滑动的坐标信息 返回的是Objcet对象console.log(touch.pageY)if(touch.pageY this.startData.pageY) {console.log(向下移动)this.showTab false;}else{console.log(向上移动)this.showTab true;}},}}
/script5. 网络请求
在uni中可以调 uni.request方法进行网络请求 在小程序网络相关的api在使用前需要配置域名白名单(本地环境不需要发布上线时再修改) uni.request(Object)部分参数uni.request
属性类型默认值必填说明urlString是开发者服务器接口地址dataObject/String/ArrayBuffer否请求的参数headerObject否设置请求的headerheader中不能设置ReferermethodStringGET否有效值GET, POSTPUT, DELETE, CONNECT, HEAD, POTIONS, TRACEtimeoutNumber60000否超时事件单位msdataTyoeStringjson否如果设为json, 会阐释对返回的数据做一次JSON.parseresponseTypeStringtext否设置响应的数据类型合法值text、arraybuffersuccessFunction否收到开发者服务器成功返回的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)
1. 发送请求: uni-app 原生api
button clickhandleGetDataGET请求/button
script
methods:{handleGetData(){uni.request({url:http://localhost:8082/api/getlunbo,success(res) {console.log(res);},fail() {},complete() {}})}
}
/script注小程序如发生失败可在详情本地设置勾选不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书
2. 项目封装http.js 发送请求
文件路径lib/http/index.js
import request from ./http.js
// import file from ./file.js //todo 跟http合并为一个
import Config from .env// 接口默认超时时间毫秒
const Timeout Config.service.timeout.default
const TimeoutObject {errorNo: 408,errorInfo: 请求超时,请检查网络连接
}
const NotFoundObject {errorNo: 404,errorInfo: 无效的请求地址
}
const http {/*** Form表单请求接口* param {String} url 请求地址* param {Object} option 请求参数* param {Number} timeout 请求超时时间单位毫秒*/formRequest: (url, option, timeout) {return Promise.race([new Promise((resolve, reject) {if (!url) {return reject(NotFoundObject)}let config {valString: false,timeout: timeout}request.post(url, option, config).then(r resolve(r)).catch(e reject(e))}),new Promise((resolve, reject) {setTimeout(() reject(TimeoutObject), timeout)})])},/*** JSON请求接口* param {String} url 请求地址* param {Object} option 请求参数* param {Number} timeout 请求超时时间单位毫秒*/jsonRequest: (url, option, timeout Timeout) {return Promise.race([new Promise((resolve, reject) {if (!url) {return reject(NotFoundObject)}let config {timeout: timeout,valString: option.valString undefined ? false : option.valString,isConvert: option.isConvert undefined ? true : option.isConvert,header: { // JSON格式Content-Type: application/json},transformRequest: [data { // JSON序列化// 去除空数组防止IAR报错data JSON.stringify(data, (_key, val) (val instanceof Array val.length 0) ?undefined : val)return data}]}// 发送异步请求request.post(url, option, config).then(r resolve(r)).catch(e reject(e))}),new Promise((resolve, reject) {setTimeout(() reject(TimeoutObject), timeout)})])},/*** JSON请求接口* param {String} url 请求地址* param {Object} option 请求参数* param {Number} timeout 请求超时时间单位毫秒*/jsonGetRequest: (url, option, timeout Timeout) {return Promise.race([new Promise((resolve, reject) {if (!url) {return reject(NotFoundObject)}let config {timeout: timeout,valString: option.valString undefined ? false : option.valString,isConvert: option.isConvert undefined ? true : option.isConvert,header: { // JSON格式Content-Type: application/json},transformRequest: [data { // JSON序列化// 去除空数组防止IAR报错data JSON.stringify(data, (_key, val) (val instanceof Array val.length 0) ?undefined : val)return data}]}// 发送异步请求request.get(url, option, config).then(r resolve(r)).catch(e reject(e))}).catch(econsole.log(e)),new Promise((resolve, reject) {setTimeout(() reject(TimeoutObject), timeout)})])},/*** 文件上传接口* param {String} url 请求地址* param {Object} option 请求参数* param {Number} timeout 请求超时时间单位毫秒*/fileRequest: (url, option, timeout Timeout) {return Promise.race([new Promise((resolve, reject) {if (!url) {return reject(NotFoundObject)}let config {timeout: timeout,header: {Access-Type: register}}// 用独立的实例发送异步请求request.post(url, option, config).then(r resolve(r)).catch(e reject(e))}),new Promise((resolve, reject) {setTimeout(() reject(TimeoutObject), timeout)})])}
}
export default http;lib/http.js
import Request from ./request.js
import Config from .env
// import LS from ../storage
// import { isJsonString } from ../utils
// import { showAlert } from ../alert
// 是否开启字段转换
const isEnableConvert Config.service.isConvert// 创建http实例
const httpFetch new Request();// request拦截器
httpFetch.interceptor.request(async config {// // 获取用户会话// let r await LS.getAccessToken()// if (r r.ok r.data.token) {// config.data[curr_session_id] r.data.token// }// // 设置客户端IP地址// r await LS.getClientIp()// if (r r.ok r.data.clientIp) {// config.data[curr_ip] r.data.clientIp// }// // 设置市场编码 todo// if (Config.market) {// config.data[market_id] Config.market// }// if (isEnableConvert config.data) {// let item {},// valString config.valString undefined ? true : config.valString,// isConvert config.isConvert undefined ? true : config.isConvert// delete config.isConvert// delete config.valString// convert(config.data, item, isConvert, valString)// config.data item// }return config
})
// response拦截器
httpFetch.interceptor.response(rsp {if (!rsp.data) return rsp// ie中rsp.data返回为string类型chorme为obj类型if (typeof rsp.data string isJsonString(rsp.data)) {rsp.data JSON.parse(rsp.data)}// 兼容IAR模式追加data模式if (rsp.data.data) {rsp.data rsp.data.data.length 1 ? rsp.data.data[0] : rsp.data.data}// 获取错误码let errInfo const errCode getErrorCode(rsp)/*** 9008错误码处理* 对不起,您缺少访问权限*/if (errCode 9008 || errCode 9008) {errInfo 对不起,您缺少访问权限doLogout(errInfo, () {})return new Promise((resolve, reject) {})}/*** 9004错误码处理* 此账号在异地登录*/if (errCode 9004 || errCode 9004) {errInfo getErrorInfo(rsp)doLogout(errInfo)return new Promise((resolve, reject) {})}/*** 9007错误码处理* 会话已失效请重新登录*/if (errCode 9007 || errCode 9007) {errInfo 会话已失效请重新登录doLogout(errInfo)return new Promise((resolve, reject) {})}// 删除多余的字段cleanInvalidAttr(rsp)// 获取最终的返回结果let result rsp.data// 参数名称格式转换if (canConvert(rsp, result)) {let tempItem {}if (Array.isArray(result)) {tempItem result.map(obj {let innerItem {}// convert(obj, innerItem, false, false)return innerItem})} else {// convert(result, tempItem, false, false)}result tempItem}// 如果有错误统一按照错误处理if (errCode ! errCode ! 0 errCode!undefined errCode!null) {return Promise.reject(result)}return result
})/*** 退出登录处理* param {*} errInfo * param {*} callback */
function doLogout(errInfo, callback) {// const func callback ? callback : () {// // 清空本地缓存// LS.clearNativeData()// // 跳转到登录页面同时清除历史记录防止后退// uni.reLaunch({// url: user/login,// });// }// return showAlert({// title: 提示,// message: errInfo// }, func)
}
// 获取错误编号
function getErrorCode(rsp) {const r rsp.datareturn r.error_code || r.errorCode || r.error_no || r.errorNo
}
// 获取错误信息
function getErrorInfo(rsp) {const r rsp.datareturn r.error_info || r.errorInfo
}
// 清理多余的字段
function cleanInvalidAttr(rsp) {// 删除多余的字段const r rsp.dataif (r.data ! undefined r.data null) {delete rsp.data.data}if (r.dataInfo ! undefined r.dataInfo null) {delete rsp.data.datainfo}if (r.data_info ! undefined r.data_info null) {delete rsp.data.data_info}if (r.error_extinfo ! undefined r.error_extinfo null) {delete rsp.data.error_extinfo}
}
// 是否需要参数名称格式转换
function canConvert(rsp, result) {// let b hasConvert(rsp.config.url)return isEnableConvert (null ! result typeof result object) rsp.config.url
}
/*** 网络异常处理* param {*} err */
function networkError(err) {const {code,message} errreturn {errorCode: code,errorInfo: message,success: false}
}
/*** 公有方法判断是否是json格式* param {*} str */
function isJsonString(str) {if (typeof str string) {try {var obj JSON.parse(str)if (typeof obj object obj) {return true}return false} catch (e) {return false}}
}
function showAlert(option, handler) {uni.showModal({title: 提示,content: option.message,showCancel: false,success: handler});
}export default httpFetch;lib/request.js
import Config from .envexport default class Request {config {baseUrl: Config.service.baseUrl,header: {Content-Type: application/json;charsetUTF-8},method: GET,dataType: json,responseType: text,timeout: Config.service.timeout.default || 60000,success() {},fail() {},complete() {}}static posUrl(url) {/* 判断url是否为绝对路径 */return /(http|https):\/\/([\w.]\/?)\S*/.test(url)}interceptor {request(f) {if (f) {Request.requestBeforeFun f}},response(f) {if (f) {Request.requestComFun f}}}static requestBeforeFun(config) {return config}static requestComFun(response) {return response}// 更改基础请求路径setConfig(f) {this.config f(this.config)}request(options {}) {options.baseUrl options.baseUrl || this.config.baseUrloptions.dataType options.dataType || this.config.dataTypeoptions.url Request.posUrl(options.url) ? options.url : (options.baseUrl options.url)options.data options.data || {}options.header options.header || this.config.headeroptions.method options.method || this.config.methodreturn new Promise(async (resolve, reject) {let next truelet _config nulloptions.complete (response) {let statusCode response.statusCoderesponse.config _configresponse Request.requestComFun(response)if (statusCode 200) { // 成功resolve(response)} else {if (response){reject(response)}else{reject(null);}}}let cancel (t handle cancel) {let err {errMsg: t,config: afC}reject(err)next false}let afC {...this.config,...options}_config {...afC,...await Request.requestBeforeFun(afC, cancel)}if (!next) returnuni.request(_config)}).catch(econsole.log(e));}// 设置 get 和 post 请求 需要url请求地址 data所需参数 get(url, data, options {}) {options.url urloptions.data dataoptions.method GET// 使用 this.request 发起请求传入参数获取数据return this.request(options)}post(url, data, options {}) {options.url urloptions.data dataoptions.method POSTreturn this.request(options)}
}6. 数据缓存
1. 异步uni.setStorage同步setStorageSync uni.setStorage(object)将数据存储在本地缓存中指定的key中会覆盖掉原来key对应的内容是一个异步接口。 参数
属性类型必填说明keystring是本地缓存中的指定的 keydataAnydefault按钮的样式类型可选primarydefaultwarnplainBoolean是需要存储的内容只支持原生类型、及能够通过 JSON.stringify 序列化的对象successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
同步存储 uni.setStorageSync
2. 异步uni.getStorage同步getStorageSync
uni.getStorage(Object): 异步从本地缓存中异步获取指定 key 对应的内容。 参数
属性类型必填说明keystring是本地缓存中的指定的 keysuccessFunction否接口调用的回调函数res {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
同步获取 uni.getStorageSync
3. 异步uni.removeStorage同步removeStorageSync
uni.removeStorage(Object): 异步从本地缓存中异步移除指定 key。
属性类型必填说明keystring是本地缓存中的指定的 keysuccessFunction否接口调用的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
同步删除 uni.removeStorageSync 清理本地数据缓存uni.clearStorage()uni.clearStorageSync()
scriptexport default {data() {return {item:{msg:信息描述}}},onLoad() {console.log(onLoad -- 生命周期页面加载了。);},onUnload() {console.log(导航页面卸载。);},methods:{goDetail(){uni.navigateTo({url:/pages/detail-component/detail?id1nameyhh})},goMessage(){uni.setStorageSync(name, yhh);uni.switchTab({url:/pages/message/message})},redirectDetail(){uni.redirectTo({url:/pages/detail-component/detail?id1})},urlDetail(){uni.navigateTo({url:/pages/detail-component/detail?itemencodeURIComponent(JSON.stringify(this.item))})}}}
/script 7. 图片的上传和预览
1. uni.chooseImage(object): 图片上传
1、uni.chooseImage(object) 方法从本地相册选择图片或使用相机拍照 2、App端如需要更丰富的相机拍照API(如直接调用前置摄像头)可使用组件https://uniapp.dcloud.net.cn/component/camera.html uniApp开发调用摄像头拍照 想要设置默认为前置摄像头 使用uni.chooseImage 是无法设置这一默认值的只有chooseVideo即拍摄视频支持
如果对兼容性没有要求只是在小程序用可使用组件 camera通过参数 device-position控制 但不支持H5App端
2. uni.previewImage(object): 图片预览
uni.previewImage(object)图片预览
3. camera组件
页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。https://uniapp.dcloud.net.cn/component/camera.html 支持微信小程序百度小程序QQ小程序快应用快手小程序京东小程序 在 App 和 H5 端可以使用API方式来调用全屏摄像头而不是组件内嵌方式详见uni.chooseImage 和 uni.chooseVideo 相关api: https://uniapp.dcloud.net.cn/api/media/camera-context.html# 创建并返回 camera 组件的上下文 cameraContext 对象。
templateview图片上传u-button clickchooseImg上传图片/u-buttonimage v-foritem in imgArr :srcitem :keyitem clickviewImg/imagebr /textcamera组件仅支持小程序/textu-button clickgetCamera拍照/u-button!-- 相机拍照 --view class v-ififPhoto!-- 相机 --camera :device-positionconvert flashoff errorerror classcamera /camera!-- 操作 --view classpadding bottom_code flex align-center justify-between!-- 返回 --view classcode_button clickbackimage src../../static/tabs/icon_return.png modeaspectFill/image/view!-- 拍照 --view classcode_button clicktakePhotoimage src../../static/tabs/camera.png modeaspectFill/image/view!-- 切换摄像头 --view classcode_button clickshowConvertimage src../../static/tabs/camera_switch.png modeaspectFill/image/view/view/view!-- 照片查看 --view class v-ifsrcviewimage :srcsrc modeaspectFit/image/view!-- 操作 --view styledisplay: flex;justify-content: space-around;button sizemini typedefault clickanew重新拍摄/buttonbutton sizemini typeprimary clickuploading上传/button/view/view/view
/templatescriptexport default {data() {return {imgArr:[],//true 拍照 false 查看ifPhoto: false,//照片src: null,oldSrc: null,//前置或后置摄像头值为front, backconvert: front}},methods: {chooseImg(){uni.chooseImage({count:5, // 默认9sizeType: [original, compressed], // 可以指定是原图还是压缩图默认二者都有// sourceType: [camera], // 拍照success: (res) {console.log(res,图片);this.imgArr res.tempFilePaths;}})},viewImg(){// 预览图片uni.previewImage({urls: this.imgArr,loop:true,indicator:number,longPressActions: {itemList: [发送给朋友, 保存图片, 收藏],success: function(data) {console.log(选中了第 (data.tapIndex 1) 个按钮,第 (data.index 1) 张图片);},fail: function(err) {console.log(err.errMsg);},}});},getCamera(){this.ifPhoto true;},//拍照takePhoto() {const ctx uni.createCameraContext();ctx.takePhoto({quality: high,success: (res) {console.log(res);this.src res.tempImagePathif (this.src ! null) {this.ifPhoto false}}});},//摄像头启动失败error(e) {console.log(e.detail);},//切换摄像头showConvert() {if (this.convert front) {// 后置this.convert back} else {// 前置this.convert front}},//返回back() {// uni.navigateBack({// delta: 1// })this.ifPhoto false;this.src this.oldSrc;},//重新anew() {this.oldSrc this.src;this.src ;this.ifPhoto true;},//上传uploading() {console.log(上传成功);}}}
/scriptstyle langscss
// 相机
.camera {width: 100%;height: 50vh;
}
//操作
.bottom_code {position: fixed;bottom: 10rpx;left: 0;width: 100%;height: 120rpx;// background-color: #1CA6EC;display: flex;justify-content: space-around;.code_button {width: 90rpx;height: 90rpx;// border-radius: 50%;image {width: 100%;height: 100%;}}
}
.img_code {width: 100%;height: 80vh;padding-top: 180rpx;image {width: 100%;height: 100%;}
}
/style8. 条件编译跨端兼容
https://uniapp.dcloud.net.cn/tutorial/platform.html uni-app已将常用的组件、js api封装到框架中开发者按照uni-app规范开发即可保证多平台兼容大部分业务均可直接满足 但每个平台都有自己的一些特性因此会存在一些无法跨平台的情况。 * 大量写if else , 会造成代码执行性能低下和管理混乱 * 编译到不同的工程后二次修改会让后续升级变得很麻烦 在 C 语言中通过 #ifdef、#ifndef 的方式为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路为 uni-app 提供了条件编译手段在一个工程里优雅的完成了平台个性化实现。 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头以 #endif 结尾。
ifdefif defined 仅在某平台存在ifndefif not defined 除了某平台均存在%PLATFORM%平台名称
// 仅出现在 App 平台下的代码
#ifdef APP-PLUS
需条件编译的代码
#endif// 除了 H5 平台其它平台均存在的代码
#ifndef H5
需条件编译的代码
#endif// 在 H5 平台或微信小程序平台存在的代码这里只有||不可能出现因为没有交集
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif
条件编译是利用注释实现的在不同语法里注释写法不一样js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 !-- 注释 --html
template!-- #ifdef H5 --view这段文字仅在h5页面展示/view!-- #endif --!-- #ifdef MP-WEIXIN --view这段文字仅在微信小程序页面展示/view!-- #endif --/view
/template
scriptexport default {data() {return {}},methods: {onLoad() {// #ifdef H5console.log(仅在h5页面打印出来\(^o^)/~);// #endif// #ifdef MP-WEIXINconsole.log(仅在微信小程序页面打印出来\(^o^)/~);// #endif},}
/script
style
/* #ifdef H5 */
view{background-color: aquamarine;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{background-color: coral;
}
/* #endif */
/style%PLATFORM% 可取值如下
APP-PLUS AppAPP-PLUS-NVUE或APP-NVUE App nvue 页面APP-ANDROID App Android 平台 仅限 uts文件APP-IOS App iOS 平台 仅限 uts文件H5 H5MP-WEIXIN 微信小程序MP-ALIPAY 支付宝小程序MP-BAIDU 百度小程序MP-TOUTIAO 字节跳动小程序MP-LARK 飞书小程序MP-QQ QQ小程序MP-KUAISHOU 快手小程序MP-JD 京东小程序MP-360 360小程序MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)QUICKAPP-WEBVIEW-UNION 快应用联盟QUICKAPP-WEBVIEW-HUAWEI 快应用华为 static 目录的条件编译 在不同平台引用的静态资源可能也存在差异通过 static 的条件编译可以解决此问题static 目录下新建不同平台的专有目录专有目录下的静态资源只有在特定平台才会编译进去。
9. uni中导航的跳转和传参
1. 使用navigator组件进行跳转
https://uniapp.dcloud.net.cn/component/navigator.html 1、该组件类似HTML中的组件但只能跳转本地页面。目标页面必须在pages.json中注册。 2、url有长度限制太长的字符串会传递失败可使用窗体通信、全局变量或encodeURIComponent等多种方式解决 3、tabbar不可通过url进行传参可以通过在main.js定义全局变量或使用本地存储
2. 使用编程式导航进行跳转
https://uniapp.dcloud.net.cn/api/router.html#navigateto •uni.navigateTo(OBJECT):保留当前页面跳转到应用内的某个页面使用uni.navigateBack可以返回到原页面。 •uni.redirectTo(OBJECT):关闭当前页面跳转到应用内的某个页面。 •uni.switchTab(OBJECT):跳转到 tabBar 页面并关闭其他所有非 tabBar 页面。 •uni.navigateBack(OBJECT):关闭当前页面返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈决定需要返回几层。 •uni.preloadPage(OBJECT):预加载页面是一种性能优化技术。被预载的页面在打开时速度更快。支持H5,App-nvue 注由于生命周期onLoad只执行一次当点击返回按钮返回上一级页面时并不会触发上一页页面的onLoad以到达传递参数的目的。因为navigateTo是保留当前页面跳转到下一级页面。所以如果需要再返回上一级页面传递参数时可以使用页面通讯uni.on()localStorage等。
templateviewviewnavigator导航跳转/view!-- 1. 跳转到普通页面 --navigator url/pages/detail-component/detail?id1nameyhhbutton sizemini typedefault跳转至详情页1/button/navigator!-- 2. 跳转到tabbar页面open-typeswitchTabtabbar不可通过url进行传参可以通过在main.js定义全局变量或使用本地存储 --navigator url/pages/message/message?id1 open-typeswitchTabbutton sizemini typedefault跳转至信息页/button/navigator!-- 3. 在当前页面打开并关闭当前页面open-typeredirect --navigator url/pages/detail-component/detail?id1 open-typeredirectbutton sizemini typedefault跳转至详情页2/button/navigator!-- 4. url长度限制encodeURIComponent(str) 编码 --navigator :url/pages/detail-component/detail?itemencodeURIComponent(JSON.stringify(item))button sizemini typedefault跳转至详情页3/button/navigatorbr /view编程式导航跳转/viewbutton sizemini typedefault clickgoDetail跳转至详情页1/buttonbutton sizemini typedefault clickgoMessage跳转至信息页/buttonbutton sizemini typedefault clickredirectDetail跳转至详情页2/buttonbutton sizemini typedefault clickurlDetail跳转至详情页3/button/view
/templatescriptexport default {data() {return {item:{msg:信息描述}}},onLoad() {console.log(onLoad -- 生命周期页面加载了。);},onUnload() {console.log(导航页面卸载。);},methods:{goDetail(){uni.navigateTo({url:/pages/detail-component/detail?id1nameyhh})},goMessage(){uni.setStorageSync(name, yhh);uni.switchTab({url:/pages/message/message})},redirectDetail(){uni.redirectTo({url:/pages/detail-component/detail?id1})},urlDetail(){uni.navigateTo({url:/pages/detail-component/detail?itemencodeURIComponent(JSON.stringify(this.item))})}}}
/script
style3. 项目封装的 $navigate 进行跳转
main.js 封装
// 扩展路由导航
Vue.prototype.$navigate (route, params {}, option {}) {try {if (route.includes(?)) {let p route.split(?)[1]route route.split(?)[0]p.split().map(it {params[it.split()[0]] it.split()[1]})}let paramsData let history (option.history false || option.history false) option.history.toString()let switchTab params.switchTab params.switchTab.toString() || false;let navigateFun history false ? uni.redirectTo : switchTab true ? uni.reLaunch : uni.navigateTo;route route.startsWith(/) ? route : / routeroute route.startsWith(/pages) ? route : /pages routeObject.keys(params).forEach(function(key) {paramsData key encodeURIComponent(params[key]) })paramsData paramsData ? : ? paramsData.substring(0, paramsData.length - 1)return navigateFun({url: route paramsData,});} catch (e) {console.log(e)}
}// 使用confirmPick(item){this.jumpByDefault(/receipt/pick/pickDetail, { detailId: item.id, otpType:insert, title:新增仓单提货 });},
jumpByDefault (link, opt {}) {this.$navigate(link, opt, {})},// url有长度限制太长的字符串会传递失败使用 encodeURIComponent进行传参
handleBook(item){this.$navigate(/pages/ctl/custody/custodyDetail, { detail: encodeURIComponent(JSON.stringify(item)) });
},// 接受参数
onLoad(params){console.log( JSON.parse(decodeURIComponent(params.detail)) )
},10. 组件的创建和生命周期
组件的生命周期 • beforeCreated: 在实例初始化之后被调用 • created: 在实例创建完成后被立即调用 • beforeMount: 在挂载开始前被调用 • mounted: 挂载到实例之后被调用。此处并不能确定子组件被全部挂载如需要子组件完成挂载之后再执行操作可以使用$nextTick • beforeUpdate: 数据更新时调用发生在虚拟DOM达不到之前仅支持H5 • updated: 由于数据更新导致的虚拟DOM重新渲染和达不到在这一行调用仅支持H5 • beforeDestory: 实例销毁之前调用在这异步实例仍然可以使用 • destoryed: 实例销毁后调用调用后vue实例指示的所有东西都会解绑所有事件监听器都会被移除所有的子实例也会被销毁。
因为生命周期属于组件所以当虚拟DOM树对比完后只会对此组件的虚拟DOM树要更新的部分做更新。 而子组件在虚拟DOM树中只知道子组件的构造器(Ctor)传入的数据(data)和子项(children)有没有变化不关心子组件内部的虚拟DOM树。 因此 只能保证这个组件要去渲染它的子组件却无法保证它的子组件内部是如何渲染的。 当使用nextTick时将在微任务(不支持微任务的浏览器将回退至宏任务)堆栈中入栈你写的回调。如果所有子组件都已经下载完毕并在Vue中定义 则从根组件往后渲染时因为用的都是同步方法微任务将在这些同步方法后被执行所以大多数时候可以通过nextTick获取子组件渲染后的DOM节点。
但是如果实例化组件的时候有其他微任务入栈就要看微任务队列的执行顺序了所以无法完全保证。
对于异步组件由于网络原因import微任务总在$nextTick之后所以总是拿不到子组件的DOM。 而在setTimeout一定时间之后由于setTimeout是宏任务所以一般会在渲染后执行。 但对于异步组件如果由于网络延迟导致微任务在宏任务之后入栈则在setTimeout的回调中仍无法获取子组件的DOM。 简单的来说 由于有异步执行顺序的影响只能保证单独组件内部的执行顺序无法保证其他组件的解析注册执行顺序。
11. 组件通讯
• 父子组件之间通讯props • 同层级组件之间通讯https://uniapp.dcloud.net.cn/api/window/communication.html
12、小程序运行含未引入组件报错
微信开发者工具从 1.05.2201210 版本开始对小程序项目新增了无依赖文件过滤能力。 如果某个 js 文件被静态分析显示是无依赖文件在实际运行时又被其他 js 文件 require 引用了则会在工具模拟器中报错这个错误。 解决方式 关闭过滤无依赖文件project.config.json 中 settings 选项添加 ignoreDevUnusedFiles: false , ignoreUploadUnusedFiles: false清除缓存然后再重新编译就好了
