微信小程序详细开发记录

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

开发工具：微信开发者工具，在官网里直接下载，链接地址：稳定版 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"); //获取本地存储的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.进入小程序后台管理系统，地址：微信公众平台

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

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

正式版，提交流程

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