小程序完整demo

一个多月的时间研究和编写，做了个测试项目，由于本人的css不好，做的界面很是难看，希望不要在意。

项目地址：https://github.com/dt8888/MyselfProject/tree/master

首页

这个页面主要是定位，其实很简单，就是调用微信Api（wx.getLocation），可以直接获取经纬度，（wx.chooseLocation方法可以调取地图显示位置）

代码如下：

wx.getLocation({
      success: function (res) {
          that.globalData.longitude = res.longitude,
          that.globalData.latitude=res.latitude//这里是获取经纬度
      },
    })

购买

2.购买，主要是支付功能（ wx.requestPayment），这一块需要与自己服务器配合，我的做法步奏为：1.先调服务器接口获取订单---->2.根据订单号获取支付所需要的串----->3.调用wx.requestPayment

代码：

//调起微信支付
  gotoWxPay() {
    var that = this;
    var payStrArr = that.data.wxPayString.split("&");
    var payStrDict = {};
    if (payStrArr.length>0)
    {
      var j;
      for (var i = 0;  j = payStrArr[i]; i++){
        payStrDict[j.substring(0, j.indexOf("="))] = j.substring(j.indexOf("=") + 1,    j.length);
      }
       
    }
     wx.requestPayment({
       "appId": payStrDict["appId"],
       "timeStamp": payStrDict["timeStamp"],
       "nonceStr": payStrDict["nonceStr"],
       "package": "prepay_id=" + payStrDict["pg"],
       "signType": 'MD5',
       "paySign": payStrDict["paySign"],
      success: function(res) {
       console.log("支付成功");
      },  
      fail: function () {
      },
      complete: function () {
       }  
      })
  }

点技师

没有什么技术点，都是一些布局上的控制，调用接口时，要把之前获取的经纬度传过去，就需要把之前的经纬度保存为全局变量。唯一有点容易错误的就是跳转页面传值：

.wxml代码

<image class='imageView' mode="scaleToFill" src="{{imageUrl}}{{data.headImgUrl}}       " data-headerUrl= "{{imageUrl}}{{data.headImgUrl}}" data-jsgh='{{data.gh}}' bindtap='bigImag' ></image>

data-headerUrl在起个中间变量
js点击图片方法：

bigImag(e){
    var imageUrl = e.currentTarget.dataset.headerurl;
    var jsGh = e.currentTarget.dataset.jsgh;
   wx.navigateTo({
     url: '../bigImage/bigImage?headerUrl=' + imageUrl + "&jsNum=" + jsGh
   })
  }

注意：（headerUrl这个参数即使大写在点击方法中e.currentTarget.dataset.headerurl 是小写）

资讯

主要是一些养生的方法，可以仔细看一下以防止。（没有主要的技术点，自己随便看看啦）

我的

5.我的自己的订单一些信息，主要的功能模块为：登录（获取用户信息），扫码核销，绑定手机号码，发送推送（模版消息）

1）登录（弹框倒计时前面文章有仔细写）
2）扫码核销

代码：

//扫描核销
  scandCode(){
    wx.scanCode({
      success: (res) => {
        console.log(res)
      }
    })
  }

3）绑定手机号码
.wxml代码

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class='bind' >绑定手机号</button>

js代码

//绑定手机号码
  getPhoneNumber: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
    this.setData({
      telePhone: "1521****014"
    })
  }

注意：encryptedData需要解密，具体解密算法需要后台调用，我没有找到在前端解密的方法，不然，我也会做的完整的。具体解密算法为你：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html

4）发送推送（模版消息）
我前面的文章中有，感兴趣的可以查看。

猜你喜欢