共计 2053 个字符，预计需要花费 6 分钟才能阅读完成。
最近在公司刚做完一个小程序，主要用途是企业经营人员用来看各类图文报表的。上线后整体成果如下图。
因为是第一次接触小程序开发，这里特意记录一下我的学习过程以及开发踩过的坑。心愿能给还不会小程序开发的兄弟带来一些帮忙。
学习过程
技术选型上间接采纳小程序原生开发，整体学习过程还是很快的，基本上第三天就开始尝试上手开发了。
第一天 ：两倍速看完了慕课网 7 月老师的小程序课程(业务细节跳着看)，对小程序开发流程，知识点有了一个初步的意识。
第二天 ：有侧重点的读小程序开发文档。
第三天：搭建框架，开始开发。
常识纲要
这里列一下我认为比拟重要的知识点，大家能够依据清单去细读文档
- 小程序 AppId 的申请
-
开发工具的应用
- 编译设置 抉择编译页面，不校验 Https, 加强编译
- 预览，调试
- 终端，调试器应用
-
与 h5 开发的区别
- rpx,wxml,wxss
- 配置大于约定，app.json 外面的设置，比方导航色彩，题目
- 标签的不同，viwe,image 等等
- 目录构造
-
page
- 能够看成小程序的顶层组件
- 如果疾速创立 4 个文件，开发工具 - 新建页面 /component
- page.json 的配置
-
语法
- 语法相似 vue
- wxs 相似 vue 中的过滤器
- 生命周期函数
- setData 与双向数据绑定
- 一些微信封装好的 api，如 wx.showLoading
- 事件告诉机制 公布订阅能够用第三方库 mitt
- 全局变量
- 正则的创立写法不同
-
路由跳转
- 跳转和重载的区别，页面栈概念
- 留神单页面一个页面栈最多推动去 10 次, 我这里用的 wx.hideHomeButton() + wx.redirectTo(url)
-
组件
- 如何应用第三方组件
- 如何自定义组件
- 组件的自定义属性 data-
-
网络、缓存
- wx.request 的封装
- setStorageSync 设置缓存
-
微信特有的一些货色
- 登录流程，wx.login 获取 code 给后盾
- 受权相干
提测与上线
注意事项
线上版拜访的接口必须是 https 且在 微信平台配置过白名单
预览和体验版能够临时在微信中点击小程序右上角的三个点，开启调试模式绕过
测试中，本地编译预览和体验版区别
本地编译的预览的每次都得更新二维码，体验版只有上传上去就行了，微信会自动更新小程序体验版
坑坑坑（从大到小）
1.echarts 小程序中应用 echart 坑真心多
- 层级问题：echarts 层级最高，所以弹出层不会笼罩它，解决办法是弹出层呈现的时候先销毁，弹出层敞开再初始化.
留神不要用 hidden, 因为这里有个 Bug，echarts 显隐管制的话，绑定的事件会生效 - 初始化机会问题：有可能接口数据申请完，挂载 echarts 上数据的时候，echarts 还未初始化胜利（
偶发），我这里应用的是公布订阅解决这个问题。 - echart 容器肯定要设置初始宽高，否则有可能渲染不进去
- 真机调试渲染不进去
2.自定义 tabbar
因为咱们有权限管制 tab, 所以我采纳的自定义 tabbar, 原本想着应用微信自带的自定义 tabbar, 省点代码，没想到切换的时候很大几率 tabbar 隐没。辣鸡微信，节约爹一天工夫，调试的时候曾一度狐疑自我，没有 get 到点上（switchtab）, 最初第二天我本人写了一个自定义组件 tabbar 解决的。最初给个问题链接 https://developers.weixin.qq….
3.hideloading 会把 showtoast 的 toast 也消掉
这个很不好，拦截器拦挡到谬误，showtoast 了，而后程序走到了异步申请 promise 的 finally 那 hideloading, 造成 toast 秒关，这个我采纳让 showtoast 异步执行
const {showToast} = wx;
Object.defineProperty(wx, 'showToast', {
configurable: true,
enumerable: true,
writable: true,
value(obj) {if (obj.async) {
delete obj.async;
setTimeout(() => {showToast.call(this, obj);
}, 500);
}else{showToast.call(this, obj);
}
}
})4. promise 没有 finally 办法，须要本人实现
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})
);
}5. slot 不带作用域插槽性能
序幕
因为篇幅限度，小程序开发就先说道这了，有什么问题能够在评论区指出。
开发不算难，就是坑有点多。而后不得不吐槽，开发者工具是真的很难用，每次改个货色都得编译几秒，烦的不行。心愿当前不要再做小程序了 ……
如果你感觉本文对你有很大的帮忙，求 点赞 ，求 珍藏 ， 求打赏，你们的反对是作者写作的最大能源！
