小程序完整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）发送推送（模版消息） 我前面的文章中有，感兴趣的可以查看。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.03.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读