小程序开发问题
一、常见问题
1、navigator点击无效果(已解决)
因为跳转到tab栏冲突，加上open-type="switchTab"
或者使用编程式导航wepy.switchTab(),跳转tab栏
wepy.switchTab({
url:'/pages/tabs/home'
})
2、页面跳转微信付款码(待解决)
小程序有个点击使用微信支付。
微信的文档是wx.openOfflinePayView({})
但是此功能为内测，暂不可用
3、小程序下拉刷新(已解决)
在当前页面配置，wepy中是配置config
config = {
enablePullDownRefresh:true,
backgroundTextStyle:'dark'
}
函数中
onPullDownRefresh(){
请求数据成功后停止刷新动作
wx.stopPullDownRefresh()
}
4、去除button,input默认样式
说明：原理：hover-class样式显示的原理是点击时把样式加到class的样式中，
冲突时，谁在后面就显示谁!
-------------------wxss----------------------------
button::after{
border:none;
}
button{
box-sizing:content-box!important;// 原先是border-box
overflow:none!important;// 原先是hiddren
border-radius:0;
background-color:#fff;
}
//按下时的样式
.btn-hover{
color:#fff;
background-color:#fff !important;
}
//禁用后的样式
button[disabled] {
background-color:#fff!important;
}
input{
outline:none;
border:none;
list-style:none;
}
5、wx:for wx:key 相关
wx:for 需要携带wx:key，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
{{index}}: {{item.message}}
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
{{idx}}: {{itemName.message}}
wx:key是用来告诉程序按照某个key去排序这个组件，例如wx:key="item.id"。id为唯一值，而如果没有这个wx:key的话，当渲染时框架会去查找这个"key"，造成资源的浪费。以及报警告。
wx:key=" *this" 在没有唯一值的时候，可以使用此来替代
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
1.需要wx:key的情况
//列表中项目的位置会动态改变或者有新的项目添加到列表中
//希望列表中的项目保持自己的特征和状态
（如 中的输入内容，
2.可不需要wx:key的情况
如果明确知道该列表是静态，或者不必关注其顺序，可以不用加wx:key
转载：https://www.cnblogs.com/chenzhiran/p/11160702.html
6、小程序分包加载(例：wepy)
微信 6.6.0 版本开始支持分包加载，而对于低于这个版本的客户端，我们做了兼容处理，开发者不需要对老版本微信客户端做兼容。
对于老版本的客户端，编译后台会将所有的分包打包成一个整包，老版本的客户端依然按照整包的方式进行加载。
目前小程序分包大小有以下限制：
整个小程序所有分包大小不超过 16M
单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
方法：
在pages同目录下创建其他分包，包名为packageA,packageB.....
app.wpy中配置config
pages: [
'pages/tabs/home',
'pages/tabs/coupon',
'pages/other/register',
'pages/other/mydetail'
],
subPackages: [
{
root:'packageA',
pages: ['pages/other/mycoupon','pages/other/coupondetail']
},
{
root:'packageB',
pages: ['pages/other/order','pages/other/information']
}
]
7、wepy双向数据绑定this.$apply()
因为数据更新是异步操作，无法在第一时间同步赋值，所以需要这个方法
在你为data里面的数据进行绑定的时候，是需要的。
比如data里面你定义了一个x=''，然后你在自定义的方法里面用this.x=200之后，需要用this.$apply()来进行数据绑定。这样你在view中绑定data中的x变量时，才会有200，不然就是空。
不过有个前提，method里面的方法是不用这个的，但methods里面只能放bindtap这类方法，所以你自己定义的其他方法，或者写在onshow里面，就必须得用this.$apply()。
8、微信小程序图片宽度100%，高度自适应
做法如下：
样式设置宽度100%，
添加属性 mode="widthFix"，
即可实现！
9、小程序触摸事件
WXML的冒泡事件列表：
类型 触发条件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longtap 手指触摸后，超过350ms再离开
注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如
的submit事件，的input事件，
10、小程序获取手机号登录注册出现解密失败
当前小程序逻辑是
-getuserInfo-getPhoneNumber-wx.login-请求服务器登录/注册
但是获取getPhoneNumber的加密信息之前就必须wx.login
官方说法：
使用方法
需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。
注意
在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
请求逻辑反了，所以code出现无效的情况
正确逻辑-wx.login--getuserInfo-getPhoneNumber-请求服务器登录/注册
11、webSocket 实现聊天的技术点
详见chat/chat.js
使用websocket将小程序和服务器建立长连接，目的是能够实时收发消息
再利用接口保存聊天消息
websocket地址实例
url = 'wss://*********.com/wss/ws/webSocketServer?token='+this.openid
12、小程序wepy分包报错---
总是提示"pages/XX/XX" has not been registered yet?
安装插件
npm install [email protected] -g
然后删除依赖包和dist文件后重新编译
13、小程序画布绘制图片无法正常显示
由于 canvas标签 加了个hidden部分手机 wx.canvasToTempFilePath 走fail canvasToTempFilePath:fail:create bitmap failed"
解决办法：画布加transfrom right:-10000000,然后将生成的图片显示在另一个和画布同大小的标签上
14、小程序样式兼容性问题
input:text-align:end/right,无效，需给input设置宽度
二、小程序封装工具函数
github链接工具库
------------------tool-------------------------------------
time---time.js 时间戳转时间字符串
canvas---barcode.js
qrcode.js
tool.js 小程序画布，二维码，条形码
wxqrcode.js 画布转base64图片缓存地址
（解决小程序二维码在华为手机不显示问题）
wxcode_base64.js内有说明条码转图片的方法
base64.js 加密的工具
baseApi.js 小程序封装api工具
request.js 小程序发请求工具
wxchat_time wxchattime.js/wxchattime2.js 时间戳转微信聊天格式
------------------wxParse-------------------------------------
商品详情页---html转小程序页面格式
1、时间戳转聊天和表单相关时间格式
三、小程序开发抽离并封装的规范
说明：抽离和封装的目的是便于二次开发修改功能点
压缩和复用代码，减少不必要的代码量
四、小程序登录逻辑
微信小程序获取用户信息并保存登录状态详解
微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧。
一、登录态维护
官方的文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject
通过 wx.login() 获取到用户登录态之后，需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识，而应该自己派发一个 session 登录态（请参考登录时序图）。对于开发者自己生成的 session，应该保证其安全性且不应该设置较长的过期时间。session 派发到小程序客户端之后，可将其存储在 storage ，用于后续通信使用。
从上图可以看出。当我们通过wx.login()获取code的后，发送给我们的服务器，然后去请求微信服务器换取得到对应的openid与session_key，openid是该用户在小程序中的唯一标识用于模板通知之类的。session_key就是用来解密用户的敏感信息。unionid之类的。unionid是微信用户在所有微信平台下的唯一标识。下面我会讲解一下如何得到。
以上就是我的实现方法。调用wx.login()得到code后请求服务器获取openid与session_key缓存在服务器当中。其中生成一个随机数为key，value为openid与session_key。然后返回到小程序通过wx.setStorageSync('LoginSessionKey',得到的随机数key)缓存在小程序当中。每当我们去请求服务器时带上LoginSessionKey即可给服务器读取从而判断用户是否在登录。是不是很简单呢？
二、用户数据的加解密
通过wx.login()登录之后。我们可以通过wx.getUserInfo()获取用户信息。其中一些不敏感的信息在返回的 result中的userInfo里。如想要获取敏感信息。openid,unionid之类的。则需要从密文中去解密得到。
而密文则在encryptedData这个字段当中。我们去请求我们服务器去解密然后得到敏感信息后则可以保存起来。
加密数据解密算法
接口如果涉及敏感数据（如wx.getUserInfo当中的 openId 和unionId ），接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据，需要对接口返回的加密数据( encryptedData )进行对称解密。 解密算法如下：
对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充。
对称解密的目标密文为 Base64_Decode(encryptedData),
对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节
对称解密算法初始向量 iv 会在数据接口中返回。
微信官方提供了多种编程语言的示例代码（点击下载）。每种语言类型的接口名字均一致。调用方式可以参照示例。
这时候我们通过小程序得到的result.encryptedData与result.iv与后端得到的session_key 解密出我们得到的敏感用户信息了。
五、新版本自动升级实现
小程序启动自动调用函数
onLaunch(){
this.autoUpdate()
}
// 自动升级
autoUpdate() {
let self = this
// 获取小程序更新机制兼容
if (!wx.canIUse('getUpdateManager')) {
// 微信版本低
// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
wx.showModal({
title: '提示',
content:
'当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
return
}
if (wx.canIUse('getUpdateManager')) {
// 微信版本正常
console.log(new Date())
// 创建版本对象
const updateManager = wx.getUpdateManager()
// 1. 检查小程序是否有新版本发布
updateManager.onCheckForUpdate(res => {
console.log(res, '检测版本') // res.hasUpdate=false,代表没有新版本
if (res.hasUpdate) {
// 2. 小程序有新版本，则静默下载新版本，做好更新准备 监听小程序有版本更新事件。客户端主动触发下载（无需开发者触发）
updateManager.onUpdateReady(async res => {
console.log(new Date())
wx.showModal({
title: '更新提示',
content: '新版本已经准备好，是否重启应用？',
success(res) {
if (res.confirm) {
console.log('用户同意下载更新')
// 3. 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate()
} else if (res.cancel) {
console.log('用户点击取消')
// 如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
wx.showModal({
title: '温馨提示~',
content:
'本次版本更新涉及到新的功能添加，旧版本无法正常访问的哦~',
success() {
console.log('再次弹框更新')
// 再次执行更新检测
self.autoUpdate()
// return
// 第二次提示后，强制更新
// if (res.confirm) {
// // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
// updateManager.applyUpdate()
// } else if (res.cancel) {
// //重新回到版本更新提示
// self.autoUpdate()
// }
}
})
}
}
})
})
}
})
}
}
六、小程序扩展
1、小程序使用lottie
https://blog.csdn.net/Xiao_peng117/article/details/102693084
https://developers.weixin.qq.com/miniprogram/dev/extended/utils/lottie.html
1、小程序使用three.js
https://www.it610.com/article/1280190449574756352.htm
https://blog.csdn.net/WeiHan_Seven/article/details/104511234
https://developers.weixin.qq.com/miniprogram/dev/extended/utils/threejs.html