小程序完整demo

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

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

首页

  1. 这个页面主要是定位,其实很简单,就是调用微信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 () {
       }  
      })
  }

点技师

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

.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 是小写)

资讯

  1. 主要是一些养生的方法,可以仔细看一下以防止。(没有主要的技术点,自己随便看看啦)

我的

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)发送推送(模版消息) 我前面的文章中有,感兴趣的可以查看。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

剖析Go编写的Socket服务器模块解耦及基础模块的设计

Server的解耦—通过Router+Controller实现逻辑分发 在实际的系统项目工程中中,我们在写代码的时候要尽量避免不必要的耦合,否则你以后在更新和维...

3576
来自专栏lonelydawn的前端猿区

javascript生成.xls文件(兼容IE&Chrome&Firefox)

贴代码,一切尽在注释中 <html> <head> <meta charset="utf-8"> </head> <body> <input ...

1826
来自专栏挖掘大数据

Cobub无码埋点关键技术实现流程(附图)

随着大数据时代的到来,数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式,有码与无码埋点。有码埋点比较容易理...

2416
来自专栏WindCoder

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

现在我们可以app.component.html用这个替换:Angular是由Google开发的AngularJS框架的新版本。它带有一个完整的重写,以及各种改...

6681
来自专栏一个会写诗的程序员的博客

bootstrap-table 前端分页,刷新事件代码实例

参考文档: http://bootstrap-table.wenzhixin.net.cn/

5331
来自专栏IMWeb前端团队

可能是史上最全的weex踩坑攻略

> 这是一篇有故事的文章 --- 来自一个weex在生产环境中相爱相杀的小码畜.. ? 故事一: Build 虽然weex的口号是一次撰写 多端运行, 但其实b...

1.8K10
来自专栏流浪猫的golang

go chan 两种应用模型

    协程完成: 7     协程完成: 8     协程完成: 2     协程完成: 5     协程完成: 4     协程完成: 6     协程完成...

772
来自专栏谭伟华的专栏

文件上传那些事儿

最近把产品目前使用的FileUploader从老的组件库分离出来的,自己也查阅了相关的各种资料,对文件上传的这些事有了更进一步的了解。

6.4K4
来自专栏技术之路

Qt5 新特性

Qt 5 已经临近发布,其最大的特点就是模块化。将原来庞大的模块更细分为不同的部分,同时,一个大版本的升级,当然少不了添加、删除各个功能类。文本简单介绍 Qt5...

2968
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-ALARM CLOCK

课程内容 Ø 隔离存储空间 Ø 设置 Ø 设置页面向导 Ø Toggle Switch控件 Ø 使用自定义字体     Alarm Clock模仿的...

1976

扫码关注云+社区