258资源分享网

一直负责公司的一个小程序项目开发，到目前为止，一期版本也算完成的差不多了，觉得也是时候从技术的角度对项目作一个小结了,记录踩的一些坑和一些自己觉得的最佳实践吧！关于项目工 ...

 

 

 

一直负责公司的一个小程序项目开发，到目前为止，一期版本也算完成的差不多了，觉得也是时候从技术的角度对项目作一个小结了,记录踩的一些坑和一些自己觉得的最佳实践吧！

关于项目工程化

小程序运行时，会把所有的源代码下载到本地。之后小程序每次运行就像App一样，几乎（除cgi数据，网络图片）全是本地文件IO，而没有网络下载，这也是小程序快的主要原因之一。另外，小程序自带了ES6编译转换，css3样式补全，所以我们基本不需要做任何工程化的事情，因为我们根本不需要合并，打包。JS代码规范，是我们所做的唯一与工程化相关的事了。以下是我们的eslint配置：

//.eslintrc.js module.exports = { "env": { "browser": true, "node": true, "commonjs": true, "es6": true }, "globals": { "App": true, "wx": true, "Page": true, "getApp": true, "getCurrentPages": true }, "extends": "eslint:recommended", "parserOptions": { "sourceType": "module", }, "rules": { // enable additional rules // 强制使用一致的缩进 // "indent": ["error", 2], // 要求加上分号 "semi": ["error", "always"], // override default options for rules from base configurations // 禁止在条件语句中出现赋值操作符 "no-cond-assign": ["error", "always"], // disable rules from base configurations "no-console": "off", "no-debugger": 0, } } 关于小程序开发IDE

在小程序官方提供的IDE中，编辑与调试在两个Tab中，切换起来实在麻烦；另外小程序开发工具对Emmet (Zen Coding)不支持...；再加上习惯了自己的开发工具，要一下切到小程序开发工具上，真是不适应;所以我在开发时，小程序开发工具仅用于效果预览与调试，而真正的代码编辑还是使用了自己习惯的IDE，配合双显示器，开发体验与开发H5基本一致。

如果不使用小程序开发工具做代码编辑器，要让.wxml、.wxss支持语法高亮，只需要将.wxml文件设置为html文件类型，而.wxss文件设置为css文件类型。由于不同编辑器设置文件类型的方法不一样，google一下就知道了。

开发时，如何体验小程序

先用管理员账号上传小程序，然后在管理平台上指定此版本为体验版，使用拥有体验权限的微信号扫码就可以体验了。这里有注意：

上传代码只有管理员权限才可以

小程序开发者默认没有体验权限，必须单独申请

Api提示

把小程序api定义wx.d.ts放到项目目录中，在编码时，就会有很酷的代码提示

在小程序中使用promise与突破wx.request最大并发数5的限制

从小程官方文档：工具->细节点中，我们可以知道，Promise在ios9中不支持，那么我们使用promise时就需要polyfill。 关于wx.request最大并发数为5的限制问题在官网有提及（地址），但我测试时，没有发现有这个限制，为了保险起见，我们还是做了相应处理。

/** * utils/app.js * 1. 增加promise支持 * 2. 突破wx.request最大并发数是5的限制 */ import { Promise, } from "./promise"; import Helper from "./helper"; // 突破 request 的最大并发数是 5的限制 // refer https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject let RequestMQ = { map: {}, mq: [], running: [], MAX_REQUEST: 5, push(param) { param.t = +new Date(); while ((this.mq.indexOf(param.t) > -1 || this.running.indexOf(param.t) > -1)) { param.t += Math.random() * 10 >> 0; } this.mq.push(param.t); this.map[param.t] = param; }, next() { let me = this; if (this.mq.length === 0) return; if (this.running.length < this.MAX_REQUEST - 1) { let newone = this.mq.shift(); let obj = this.map[newone]; let oldComplete = obj.complete; obj.complete = (...args) => { me.running.splice(me.running.indexOf(obj.t), 1); delete me.map[obj.t]; oldComplete && oldComplete.apply(obj, args); me.next(); }; this.running.push(obj.t); return wx.request_bak(obj); } }, request(obj) { let me = this; obj = obj || {}; obj = (typeof(obj) === "string") ? { url: obj, } : obj; this.push(obj); return this.next(); }, }; function hackRequest() { wx["request_bak"] = wx["request"]; Object.defineProperty(wx, "request", { get() { return (obj) => { obj = obj || {}; obj = (typeof(obj) === "string") ? { url: obj, } : obj; return new Promise((resolve, reject) => { obj.success = resolve; obj.fail = (res) => { if (res && res.errMsg) { reject(new Error(res.errMsg)); } else { reject(res); } }; RequestMQ.request(obj); }); }; }, }); } // 增加promsie支持 function addPromise() { let noPromiseMethods = { stopRecord: true, pauseVoice: true, stopVoice: true, pauseBackgroundAudio: true, stopBackgroundAudio: true, showNavigationBarLoading: true, hideNavigationBarLoading: true, createAnimation: true, createContext: true, createCanvasContext: true, hideKeyboard: true, stopPullDownRefresh: true, }; Object.keys(wx).forEach((key) => { if (!noPromiseMethods[key] && key.substr(0, 2) !== "on" && key !== "request" && !(/\w+Sync$/.test(key))) { wx[key + "_bak"] = wx[key]; Object.defineProperty(wx, key, { get() { return (obj) => { obj = obj || {}; //obj = (typeof(obj) === 'string') ? {url: obj} : obj; return new Promise((resolve, reject) => { obj.success = resolve; obj.fail = (res) => { if (res && res.errMsg) { reject(new Error(res.errMsg)); } else { reject(res); } }; wx[key + "_bak"](obj); }); }; }, }); } }); } export default function createApp(config) { addPromise(); hackRequest(); let helper = Helper.$extend({}, Helper, { Promise, }); return Helper.$extend({}, config, { helper, }); } // app.js启动小程序 import createApp from "./utils/app"; App(createApp({ data: {}, Events: {}, onLaunch() { // console.log(wx.login()); // Do something initial when launch. }, }); 小程序在Android机上面拉取不到数据，而在IOS上可以

遇到这个问题，多半是https版本或证书有问题，找后台或运维解决。

使用weui-wxss，wept