微信小程序开发总结
-
微信公众号的账户和微信小程序的账户是分离的，并不是同一个，需要使用一个新的邮箱来注册小程序。
-
正式环境必须使用https协议，测试环境配置工具中可以设置为不校验http协议。
- 第三方框架 wepy 与 mpvue 的区别：
腾讯官方开发的类vue框架，但是实际使用和vue还是有不小的区别的，总的来说比直接用原生开发体验上要好很多，如果是新项目建议用wepy开发，不能使用div、ul等html标签，而必须使用小程序的view、text等基础组件。
美团基于vue开发的框架，最大的优点就是符合vue的使用习惯，熟悉vue开发的同学，可以很快适应，比较适用于从原有vue项目迁移过来。
- wepy 与 vue 的异同
相同点：
Props、 Mixin、 computed、 slot、组件化开发
不同点：
methods里只能写template里绑定的事件、脏数据检查需要手动调用方法触发
-
微信小程序的第三方UI框架，目前各方面相对比较好用的是 iview weapp，不过还是存在比较多的坑，建议iview只是作为参考，另外自己实现组件体验和稳定性上来说会更好。
-
微信小程序的http封装
默认是get方法，post方法只接受表单传值。
// http.js
export const API_URI = 'https://test.faceke.com/api/v2'
import util from "./util"
let token = ""
function fetch(url, params, method, header, resolve, reject) {
let _header = {
...header,
'client': 'miniapp',
'Authorization': "Bearer " + token
}
wx.request({
url: `${API_URI}/${url}`,
data: params,
method: method,
header: _header,
success: res => {
if (res.statusCode === 200 || res.statusCode === 201 || res.statusCode === 202 || res.statusCode
=== 204) {
resolve(res)
} else if (res.statusCode === 401) {
console.log("token过期重新登录")
wx.removeStorage({
key: 'token',
success(res) {
console.log(res.data)
}
})
setTimeout(() => {
wx.reLaunch({
url: 'index'
})
}, 600);
} else {
reject(res)
}
},
fail: err => {
console.log(err)
}
})
}
const http = function (url, params, method, header) {
if (!token) {
wx.getStorage({
key: 'token',
success(res) {
token = res.data
console.log(res.data)
}
})
}
return new Promise((resolve, reject) => {
if (!token) {
setTimeout(() => {
fetch(url, params, method, header, resolve, reject)
}, 300);
} else {
fetch(url, params, method, header, resolve, reject)
}
})
}
module.exports = {
baseUrl: function () {
return API_URI
},
get: function (url, params) {
return http(url, params, "GET", {
'content-type': 'application/json'
})
},
delete: function (url, params) {
return http(url, params, "DELETE", {
'content-type': 'application/json'
})
},
post: function (url, params) {
let formData = util.json2Form(params)
return http(url, formData, "POST", {
'content-type': 'application/x-www-form-urlencoded'
})
}
}
封装一个json格式数据转form格式数据的方法
function json2Form(json) {
let str = [];
for (let p in json) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
}
return str.join("&");
}
module.exports = {
json2Form,
}
- 小程序/公众号登录涉及到两个最关键的用户标识：
OpenId 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。
UnionId 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至APP 之间的数据互通了。
- wx.getUserInfo用户信息在wx.login之后再获取
wx.login({
success(res) {
if (res.code) {
that.code = res.code
wx.getUserInfo({
success: function (res) {
console.log("获取微信用户信息", res)
let data = res
http.post("miniLogin", {
code: that.code,
encryptedData: data.encryptedData,
iv: data.iv
}).then(({
data
}) => {
console.log("登录", data)
})
}
})
}
}
})
- 小程序模板消息推送获取formId
这里的button必须用原生的button, 如果用iview的i-buttton会获取不到formId。
<template>
<form @submit="getFormId" report-submit="true">
<button form-type="submit" @submit="getFormId">开关</button>
</from>
</template>
<script>
import wepy from 'wepy'
export default class XXX extends wepy.component {
methods = {
getFormId(e) {
let formId = e.detail.formId
// to do sth
}
}
}
</script>
- template中{{}}直接写js不起效
有时候我们在vue中习惯写{{ item.label.substr(0,2) }}来处理字符串，但是在wepy中这种写法有时候会不起效，为了使程序更稳定，我们可以在onLoad中直接处理好。
- wx.navigateTo 和 wx.reLaunch
wx.navigateTo 会保留当前页面然后跳转，当用户按返回按钮后不会触发onLoad等事件，导致无法更数据。
wx.reLaunch 会关闭所有页面再跳转。
使用时需要根据实际业务选择合适的api。
- 微信开发者工具的bug
当发现输入框不能输入或者工具的按钮点不动时，关掉微信开发者工具，然后重新打开即可。
- 发布审核流程
提交体验版，内部测试审核通过后 -> 提交审核（1~3天，本次项目审核时间2个小时）-> 提交发布
注意，提交审核后，还需要手动去提交发布，否则是不算上线的。提交发布成功后，大概需要5分钟左右的时间，就可以在微信里搜索到小程序了。
- 右上角的转发/分享按钮
默认右上角是没有转发按钮的，需要自己手动在需要转发分享的页面onLoad里添加以下代码。
wx.showShareMenu({
withShareTicket: false
})