微信小程序详细开发记录

最近半个月，开发了一个微信小程序，记录一下，一来自己以后开发积累经验，二来为没有开发过的小伙伴提供一个开发参考，规避一些不必要的坑..........

开发工具：微信开发者工具，在官网里直接下载，链接地址：稳定版 Stable Build | 微信开放文档

在这里一般使用稳定版本，选择对应电脑系统下载，安装即可。

下面就是具体的项目搭建了：

1.打开微信开发者工具，会让你输入appid,这个appid是在微信公共公众平台里，注册申请到的。链接：微信公众平台，如果已经有的可以直接用，例如一般开发前，公司会申请的。

总之拿到之后，就输入。

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,

下面有一个对照表，按表来用：

微信小程序一些常用标签与html的对应关系：

HTML	微信小程序
<div></div>	<view></view>
<h1></h1>...<h6></h6> <p></p><span></span>	<view></view>
<i class="icon">	<icon></icon>
<iput type="text"> <iput type="checkbox"> <iput type="radio"> <iput type="file">	<input/> <checkbox/> <radio/> <view bindtab="chooseImage">
<a href="#"></a>	<navigator url="#" redirect></navigator >
<img src="">	<image src="" ></image >

css 中，单位使用rpx,这是微信自带的，做好适配了，不用单独做适配了，和uniapp一样。

二、静态页面写好后，就开始接口联调了，并且进行一连串的授权登录，因为遇到了一些坑，下面进行具体的记录，为大家参考时少走一些坑：

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"); //获取本地存储的openidapp.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 = thisvar src = that.data.musicUrlbgMusic.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.musicUrlbgMusic.play();console.log("播放")} else {bgMusic.pause();console.log("暂停")}}

到此结束，这就是开发小程序的基本流程，和遇到需要授权、支付的具体处理措施

测试用体验版，具体操作：

1.在微信开发者工具中，点击头部“上传”按钮，将代码打包发布到小程序管理后台端

2.进入小程序后台管理系统，地址：微信公众平台

步骤：管理->版本管理-开发版本->设置为体验版，获取到体验版二维码给测试人员测试。

3.在小程序后台管理系统中，添加项目成员或体验成员添加可体验的人员，实测不太行，需要添加项目成员，才有权限测试，添加后需要管理员扫码验证，才能添加成功。

正式版，提交流程

点击提交审核就行，跳转from表单，正常填写就行，按提示提交，就行，然后上面截图就会显示"审核中"，等审核通过就能拿到正式版的二维码了。

微信小程序详细开发记录相关推荐

微信小程序详细开发教程
全栈开发之路怎么能少得了小程序开发呢,下面我将详细介绍一个微信小程序从开发的部署的全过程: 一.在开始之前,先解释以下几个误区: 1.微信小程序个人号是可以开发并发布的: 2.微信小程序发布的体验版和 ...
校园表白墙、微信表白墙、校园墙微信小程序 JAVA 开发记录与分享
目录最新版表白墙博客地址 1.微信小程序前台展示 2.功能介绍 3.后台管理 4.后端语言采用 JAVA 开发 5.体验此微信小程序扫描下方二维码 6.如何联系我或需要源码进行联系最新版表白墙博 ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
完整的微信小程序支付开发记录（亲测）
这次呢是开发小程序的支付功能.因为没有做过,特此记录,做一个小总结,以便以后使用以及给小伙伴们提供一个像我一样的小白一个参考,我也是一点一点摸索过来的,此文只针对开发支付流程而言以及出现的问题,其它则 ...
微信小程序商城开发记录二之数据表结构设计
文章目录前言 1.用户表 2.产品表 3.商品品牌表 4.商品分类表 5.订单表 6.订单商品信息表 7.购物车表 8.收获地址表 9.省市区地址联动表 10.广告信息表 11.优惠券表 12.优惠 ...
【小程序】微信小程序云开发笔记详细教程（建议收藏）
1- 前言 1.1 微信云开发是什么? 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务. 开发者可以使用云开发快速开发小程序.小游戏.公众号网页等,并且原生打通微信开放能力. 开发者无需搭建 ...
校园二手书商城源代码基于微信小程序云开发，可在线支付提现，含详细配置教程
校园二手书商城源代码基于微信小程序云开发,可在线支付提现,含详细配置教程完整代码下载地址:校园二手书商城源代码基于微信小程序云开发欢迎使用,下面是配置教程长话短说,下面直接说配置流程一.小程序 ...
代驾微信小程序现成开发，代驾司机用户端功能详细介绍
代驾微信小程序现成开发制作解决方案: 微信代驾小程序开发制作功能详细介绍: (一)管理后台功能概述:总交易额.总交易数.昨日交易额.昨日交易数.昨日司机申请数量.营业额统计看板aigao0607 基 ...
微信小程序应用开发赛作品综合开发记录——晋鹿文旅（云开发——概览）
文章目录前言作品展示: 1.设计理念: 2.1.风景/人文历史 2.2.文物园 2.3.志愿者(暂未对接任何活动,仅测试) 2.4.英汉传译(考虑到可能在旅行中外国友人或者单纯就想翻译) 2.5. ...

微信小程序详细开发记录

微信小程序详细开发记录相关推荐

最新文章

热门文章