微信小程序详细开发记录
最近半个月，开发了一个微信小程序，因为是第一次开发，记录一下，一来自己以后开发积累经验，二来为没有开发过的小伙伴提供一个开发参考，规避一些不必要的坑..........
开发工具：微信开发者工具，在官网里直接下载，链接地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
在这里一般使用稳定版本，选择对应电脑系统下载，安装即可。
下面就是具体的项目搭建了：
1.打开微信开发者工具，会让你输入appid,这个appid是在微信公共公众平台里，注册申请到的。链接：https://mp.weixin.qq.com/，如果已经有的可以直接用，例如一般开发前，公司会申请的。
总之拿到之后，就输入。
2.在微信开发者工具里，打开后有小程序、公众号等选项，咱们选择小程序，点击下图红框的"+"号，就可以新建项目了。
3.新建好的项目是一个有一个index页面的项目，可以正常运行，这只是一个空项目，还要像vue一样，搭建一些必须的架构，因为我用vue用的比较多一些，就参照了它的设计思维，搭建了小程序项目的架构，具体搭建请看下面:
1.app.js,这是小程序框架自带的文件，入口文件，相当于vue的main.js.
一、 在根目录下创建一个utils文件夹，用来放公共方法,下面就是具体的方法:
1.store.js 存储用户信息,主要封装一个存储方法，
setItem(key, value, module_name)---存数据
getItem(key, module_name)----取存的数据
clear(key)----删存的数据
2.router.js 路由跳转的方，把微信的5种跳转方式封装起来，调用起来更加方便。
二、在根目录下创建一个http文件夹,用来处理接口请求：
1.在http文件夹里新建request.js 封装公共的请求方法，用 wx.request({ })进行底层封装，
这样post和get都可以用到，不用分开封装了。
2.在http文件夹里新建api.js 文件，用了存放接口，统一管理接口，后期好维护。
module.exports={
getSession:"/wx-miniapp/saveUserInfo",//后台授权获取openid接口
login:'/login', //点击调用后台登录接口
}
三、在根目录下创建env文件夹，用了存放基地址：
// 配置基地址
module.exports={
// 开发环境
Dev:{
baseApi:"https://test.jusafe.cn:8033/app/service"
},
// 测试环境
Test:{
baseApi:"https://test.jusafe.cn:8033/app/service"
},
// 生产环境
Prod:{
baseApi:"https://test.jusafe.cn:8033/app/service"
},
}
//封装好，调用
let env = App.config.baseApi; //获取基地址
四、app.js中
1.封装好之后，在app,js中，进行全局引用：
// 入口 全局注册
let Api = require("./http/api");//引入接口
let request = require("./http/request.js");//引入公共请求方法
let config = require("./env/index"); //引入基地址
let router = require("./utils/router");//引入路由跳转
let env = "Dev"; //引入基地址
App.version = "1.0.0"; //声明这次的版本信息
App.config = config[env]; //获取基地址，公共文件用
App({
config: config[env], //给视图用
Api,
request,
router,
// 全局调用请求
get: request.fetch,//get请求
//post请求
post: (url, data) => {
return request.fetch(url, data, { method: "post" });
},
postParam: request.postParam,
// 初始化完成时，会触发 onLaunch(全局只触发一次)
onLaunch() {},
});
基本的框架搭建完毕，下面开始进行开发：
一、在根目录下，有一小程序自带的app.json,在pages属性里添加页面路由，
{
"pages": [
"pages/home/home",
]
}
例如home页面，新建完之后，就会自动出现home文件夹，里面有4个文件，分别是js文件、json文件、html文件、css样式文件，对应写代码。
如果写静态页面，就按照一般的布局进行写，标签用 <view> </view>这个和uniapp一样，相当于div,
下面有一个对照表，按表来用：
二、静态页面写好后，就开始接口联调了，并且进行一连串的授权登录，因为遇到了一些坑，下面进行具体的记录，为大家参考时少走一些坑：
1.首页要进行授权，并登录
2021年4月13日之后，微信官方最新文档规定 需要按钮点击才能进行授权，调起微信授权弹框。
在这之前页面加载就能调用，现在不能用了。
需要点击授权按钮，我的项目进入园区导览需要授权，首页不用授权，允许授权弹框会弹出，点击
允许 后成功授权，wx.login回调里调用后台登录接口，把第一次授权拿到用户信息，加上wx.login 接口返回的code，作为参数一同传给后台，获取openid;
此时授权按钮换成登录按钮，点击登录按钮再调用一次后台接口，传参openid,获取token。
2.个人中心也同样进行授权登录。
具体方法如下：
//1. 园区导览 授权按钮点击
getUserProfile() {
// 判断用户是否登录
if (!(wx.getStorageSync("openId"))) {
// 先授权
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
// 存储用户信息
store.setItem("myUserInfo", res.userInfo);
this.setData({
userInfo: res
})
// 判断用户是否登录
// if (!(wx.getStorageSync("openId"))) {
this.getSession();
// }
}
})
}
},
//2. 获取用户授权的code，传递给后台换取openid
getSession() {
var _this = this;
wx.login({
success(res) {
if (res.code) {
app.post(Api.getSession, {
code: res.code,
iv: _this.data.userInfo.iv,
encryptedData: _this.data.userInfo.encryptedData,
signature: _this.data.userInfo.signature,
rawData: _this.data.userInfo.rawData
}).then((res) => {
store.setItem("openId", res.openId); //本地存储后台取到的openid
// 在成功回调里隐藏授权按钮
_this.setData({
authorizeShow: false,
loginShow: true
})
}).catch((err) => {
console.log(err.message, "---2");
});
}
},
});
},
//3. 点击登录
getUserInfo(e) {
let openid = wx.getStorageSync("openId"); //获取本地存储的openid
app.post(Api.login, {
openid: openid,
})
.then((res) => {
//存储后台登录接口获得的token
store.setItem("token", res.token);
// 再跳转导览页面
router.push({
path: 'parkGuide',
query: {
id: e.currentTarget.dataset.item.id
}
});
});
},
2.获取手机号，要进行手机号授权
需要按钮点击事件，才能调起微信授权手机号弹框，先判断是否授权手机号了，如果授权就从缓存里取，如果没有就调用后台授权手机号接口，从点击事件的回调参数里，能取到手机号和偏移量加密字段 encryptedData、iv，加上页面加载就获取的code,(wx.login获取)，三个参数传给后台接口，后台java拿到code，换取sessionKey,然后通过sessionKey/encryptedData、iv解密拿到手机号，前端缓存到本地，进行对应的业务
注意：code是一次性的，用过就不能在用了，所有要在页面加载的onLoad 里面调用，拿到code传给后台，
具体方法如下：
// 点击按钮获取微信手机号
getPhonenumberClick(e) {
var _this = this;
// 判断有没有授权手机号
if (wx.getStorageSync("phoneNumber")) {
// 取缓存手机号 赋值给input 框回显
_this.setData({
phone: wx.getStorageSync("phoneNumber"),
});
} else { //没有授权手机号 请求后台接口
app.post(Api.getPhone, {
code: this.data.code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
}).then((res) => {
// 存手机号
store.setItem("phoneNumber", res.phoneNumber);
// 获取 手机号赋值给input 框的值
_this.setData({
phone: res.phoneNumber,
});
});
}
},
3.购买调用微信支付功能的实现：
1.如果之前没有授权手机号，这里还要先授权手机号，步骤同上
2.调用后台添加订单接口，把后台需要的订单信息传递给后台，接口成功后返回
timeStamp: res.timeStamp,
nonceStr: res.nonceStr,
package: res.package,
signType: res.signType,
paySign: res.paySign,
然后用这5个参数传，调起微信支付接口 wx.requestPayment，成功后会弹出微信支付页面，付完钱之后，在回调里跳回首页。
注意： package这个参数一定要有值，否则调用不成功，这个参数后台要配置商户id才能获取。
具体实现方法如下：
// 点击购买讲解
getPhonenumberClick(e) {
var _this = this;
// 判断有没有授权手机号
if (wx.getStorageSync("phoneNumber")) {
// 取缓存 手机号赋值
_this.setData({
phone: wx.getStorageSync("phoneNumber"),
});
} else { //没有授权手机号 请求后台接口
app.post(Api.getPhone, {
code: this.data.code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
}).then((res) => {
// 存手机号
store.setItem("phoneNumber", res.phoneNumber);
// 获取 手机号赋值
_this.setData({
phone: res.phoneNumber,
});
});
}
// 调用后台支付接口（把订单信息传给后台）
app.post(Api.orderAdd, {
// 把订单信息参数传给后台
secnicAreaId: _this.data.scenicListId
}).then(res => {
console.log(res, '订单返回信息');
// 后台响应5个参数用来给 微信支付接口
wx.requestPayment({
timeStamp: res.timeStamp,
nonceStr: res.nonceStr,
package: res.package,
signType: res.signType,
paySign: res.paySign,
success(res) {
console.log('支付成功', res)
//支付成功返回景点列表页
router.push({
path: "home",
openType: "switchTab",
});
},
fail(err) {
console.error('支付失败', err)
}
})
})
},
4.在具体业务中，需要一个是否购买接口，来判断是否购买的状态，用了显示或隐藏购买按钮
// 判断用户是否购买
PaymentType() {
app.get(Api.PaymentType, {
scenicId: this.data.scenicListId, //景区id
}).then(res => { //返回 true：已买 ，false：未买
if (res.pay) {
// 播放讲解按钮改完点击 同时隐藏购买按钮
this.setData({
isDisabled: false
});
}
})
},
5.点击播放按钮音乐播放，实现功能：
思路：在使用的页面，js文件上，先实例一个getBackgroundAudioManager：
const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐，在最上面获取：
下面是具体实现方法：
// 点击播放按钮音乐播放
playMusicClick(e) {
console.log(e.currentTarget.dataset.item.scenicExplain, 'mp3文件路径');
this.setData({
musicUrl: e.currentTarget.dataset.item.scenicExplain
})
this.listenerButtonPlay() //调用播放音频的方法
},
// 开始播放
listenerButtonPlay: function () {
var that = this
var src = that.data.musicUrl
bgMusic.title = '背景音乐播放'; //必须设置title，否则会报错
bgMusic.src = src; //如果需要页面加载完成自动播放背景音乐，解除注释，背景音乐默认赋值上src后就自动播放
bgMusic.onTimeUpdate(() => { //监听音频播放进度
//console.log(bgMusic.currentTime)
})
bgMusic.onEnded(() => { //监听音乐自然播放结束
console.log("音乐播放结束");
// that.listenerButtonPlay(src) //r如果需要音乐结束后继续循环播放，解除注释
})
bgMusic.pause(); //播放音乐
},
//停止播放
listenerButtonStop: function () {
bgMusic.stop()
},
//有时我们并不需要自动播放背景音乐，需要手动控制，随便加个点击事件
autoMusic: function (e) {
var that = this;
that.setData({
auto: !that.data.auto
});
if (that.data.auto) {
bgMusic.title = that.data.musicUrl //这个地方必须放在判断里，放在外边你会发现你暂停音乐暂停不了
bgMusic.src = that.data.musicUrl
bgMusic.play();
console.log("播放")
} else {
bgMusic.pause();
console.log("暂停")
}
}
到此结束，这就是开发小程序的基本流程，和遇到需要授权、支付的具体处理措施
测试用体验版，具体操作：
1.在微信开发者工具中，点击头部“上传”按钮，将代码打包发布到小程序管理后台端
2.进入小程序后台管理系统，地址：https://mp.weixin.qq.com
步骤：管理->版本管理-开发版本->设置为体验版，获取到体验版二维码给测试人员测试。
3.在小程序后台管理系统中，添加项目成员或体验成员添加可体验的人员，实测不太行，需要添加项目成员，才有权限测试，添加后需要管理员扫码验证，才能添加成功。
正式版，提交流程
点击提交审核就行，跳转from表单，正常填写就行，按提示提交，就行，然后上面截图就会显示"审核中"，等审核通过就能拿到正式版的二维码了。
