项目准备工作

处理app.js和首页的先和问题

生成条形码

生成二维码

城市的三级联动

支付宝小程序.jpeg

1、项目准备工作

项目的准备工作做的不是很多。在支付宝小程序踩的坑，主要就是让我很不能接受这个ide工具是真的不是怎么样。

因此我选择了vscode去编写代码。原来ide只用来调试和模拟器。

1.1my.httpRequest的请求封装。

在请求中，会出现error。一共有这几种情况

• error 11 是代表无权跨越
• error 12 是网络错误
• error 13 是请求超时
• error 14 是解码失败
• error 19 是请求错误

因为支付宝小程序是完全支持es6的。当然部分语法不支持。详情需要查看官方文档。因此我们可以写入Promise 对小程序的Promise支持。（微信小程序是需要导入Promise库用以支持）

function myPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function (res) { //成功 resolve(res) } obj.fail = function (res) { //处理失败 reject(res); console.log(`接口请求失败 ，错误原因 ${JSON.stringify(res)}`); switch (res.error) { case 11: my.showToast({ type: 'exception', content: '无权跨越', duration: 1000,}); break; case 12: my.showToast({ type: 'exception', content: '网络出错了', duration: 1000, }); break; case 13: my.showToast({ type: 'exception', content: '请求超时', duration: 1000, }); break; case 14:my.showToast({ type: 'exception', content: '解码失败了', duration: 1000, }); break; case 19:my.showToast({ type: 'exception', content: '请求发生了错误', duration: 1000, }); break;default:my.showToast({ type: 'none', content: '请求发生了错误', duration: 1000, }); break;}} fn(obj) }) } } //无论promise对象最后状态如何都会执行 Promise.prototype.finally = function (callback) { let P = this.constructor; return this.then( value => P.resolve(callback()).then(() => value), reason => P.resolve(callback()).then(() => { throw reason }) ); }; function dataRequest(url, method, data) { var param = JSON.parse(data); param['xx'] = 'xx'; param['xx'] = 'xx'; param['xx'] = 'xx-M'; param['xx'] = 'Cxxx;var dataRequest = myPromisify(my.httpRequest) console.log(`接口 : ${url} 请求参数为 ： ${JSON.stringify(param)}`); return dataRequest({ url: url, method: method, data: JSON.stringify(param), headers: { "Content-Type": "application/json" }, }) } 

将方法导出

 module.exports = { dataRequest: dataRequest } 

请求结果.png

1.2 工具类方法的写入 写入utils/util.js

在项目中，我只封装了时间类，和 条形码，二维码的方法。
具体的导出方法和上面的方式一样。这里留下时间戳的方法记录

function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate()var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') } 

导出时间戳的方法

module.exports = { formatTime: formatTime, } 

1.3请求接口地址，统一封装

每个项目中都会请求大大小小的接口地址。因此需要统一存放地址路径。

var connect ={ KRISLEE：‘�http://www.baidu.com‘ } module.exports = connect 

1.4如何导入

导入是通过import来进行导入模块，引用模块，进行操作

import event from ‘../../event.js’ 

2、处理app.js和首页的先后问题

在小程序上，我们遇到这个问题。在加载app.js的时候，我们会先调用接口来进行获得支付宝小程序的openid，通过openid来换取userid。然后homepage来获得userid 来进行操作，但是我们遇到这个问题。homepage的js有时候会在app.js之前运行。因此页面需要通过下拉刷新来执行。
2.1 解决方式。

定时器

事件监听

定时器的方法就是延时执行主要的钩子函数里的方法。现在我们主要来说说事件监听的方法。
附代码

var events = {};function on(name, self, callback) { var tuple = [self, callback]; var callbacks = events[name]; if (Array.isArray(callbacks)) { callbacks.push(tuple); } else { events[name] = [tuple]; } }function remove(name, self) { var callbacks = events[name]; if (Array.isArray(callbacks)) { events[name] = callbacks.filter((tuple) => { return tuple[0] != self; }) } }function emit(name, data) { var callbacks = events[name]; if (Array.isArray(callbacks)) { callbacks.map((tuple) => { var self = tuple[0]; var callback = tuple[1]; callback.call(self, data); }) } }exports.on = on; exports.remove = remove; exports.emit = emit; 

当app.js完成某个操作的时候，event.emit("finish",data),这时候，主要的钩子函数主要负责监听，拿到事件名称和数据，进行操作 event.on("finish",(data)=>{}),最后要在页面卸载的时候同时，卸载事件监听函数 event.remove("finish",this)

3、生成条形码和二维码

在这里。我就废话不多说了。附近之后在文章的后面贴上。条形码和二维码的文件库。使用的方法，
使用的方式和方法也很简单。

3.1导入文件库

import 文件库 from xxx.js

3.2生成使用方法

function barc(id, code, width, height){console.log(convert_length(width)); console.log(convert_length(height)); barcode.code128(my.createCanvasContext(id), code, convert_length(width), convert_length(height)) console.log("执行完毕") }function qrc(id, code, width, height) { qrcode.api.draw(code, { ctx: my.createCanvasContext(id), width: convert_length(width), height: convert_length(height) }) } function convert_length(length) {return Math.round(my.getSystemInfoSync().windowWidth * length / 750); } 

3.3 使用

在文件里。我在支付宝小程序里，在onLoad方法里使用，画布并不会绘图出二维码和条形码。原因我至今还是没想明白。所以我放钩子函数onReady方法里使用。

在axml文件里。指定唯一标识id

<canvas id="qrcode" style="width:400rpx;height:400rpx;"/> 

在js文件里，onReady()方法里使用

 onReady(){ wxbarcode.qrcode('qrcode', this.data.value, 400, 400); } 

条形码.png
二维码.png

4、城市的三级联动

4.1需要导入city.js

这是一个城市列表。一般省，直辖市 是第一梯队，一般的市是第二梯队，之后的县，区是第三梯队。如下

{ "id": "320900", "name": "盐城市", "parent_id": "320000", "level_type": "2" }, { "id": "320902", "name": "亭湖区", "parent_id": "320900", "level_type": "3" }, { "id": "320903", "name": "盐都区", "parent_id": "320900", "level_type": "3" }, { "id": "320921", "name": "响水县", "parent_id": "320900", "level_type": "3" }, 

4.2 对city.js的操作

首先需要我们对所有的省市区进行集合操作，把他们归集于一起，方便之后的槽子

// 所有的 省市区 集合 var result_province = cityData_new.filter( function (value) { return (value.level_type == 1); } ); var result_city = cityData_new.filter( function (value) { return (value.level_type == 2); } ); var result_county = cityData_new.filter( function (value) { return (value.level_type == 3); } ); 

之后，我们定义当前选定的省市区

之后对城市选择进行操作。比如选择的江苏省，那么之后就要带出南京市，苏州市，选择了南京市，就要带出建邺区之类的操作。
贴出代码 ：

cityChange: function (e) { var val = e.detail.value // 改变的picker 每一列对应的下标位置 var t = this.data.cityValue; // 原本的位置if (val[0] != t[0]) { // 第一列改变 city_s = []; county_s = []; var current_id = province_s[val[0]].id; city_s = this.selectResultAction(result_city, current_id); var current_city_id = city_s[0].id; county_s = this.selectResultAction(result_county, current_city_id); this.setData({ citys: city_s, countys: county_s, cityValue: [val[0], 0, 0] }) return; } if (val[1] != t[1]) {// 第二列改变 county_s = []; var current_city_id = city_s[val[1]].id; county_s = this.selectResultAction(result_county, current_city_id); this.setData({ countys: county_s, cityValue: [val[0], val[1], 0] }) return; } if (val[2] != t[2]) {// 第三列改变 this.setData({ county: this.data.countys[val[2]], cityValue: val }) return; } }, 

以上是对city进行操作。前端的页面也是需要我们考量的地方。支付宝小程序。有<picker-view> 的标签，以及 <picker-view-column>这样的标签，更加快速的完成了我们想要的操作。
之后我会贴出，相关附件。

以上就这么多，之后会慢慢补充，慢慢完善

相关链接

城市三级联动地址
条形码，二维码的git地址

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/16264.html