最近在公司刚做完一个小程序，主要用途是企业经营人员用来看各类图文报表的。上线后整体成果如下图。

因为是第一次接触小程序开发，这里特意记录一下我的学习过程以及开发踩过的坑。心愿能给还不会小程序开发的兄弟带来一些帮忙。

学习过程

技术选型上间接采纳小程序原生开发，整体学习过程还是很快的，基本上第三天就开始尝试上手开发了。
第一天：两倍速看完了慕课网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不带作用域插槽性能

序幕

因为篇幅限度，小程序开发就先说道这了，有什么问题能够在评论区指出。

开发不算难，就是坑有点多。而后不得不吐槽，开发者工具是真的很难用，每次改个货色都得编译几秒，烦的不行。心愿当前不要再做小程序了......

如果你感觉本文对你有很大的帮忙，求点赞，求珍藏， 求打赏 ，你们的反对是作者写作的最大能源！