关于小程序:小程序开发快速入门

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

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

技术选型上间接采纳小程序原生开发，整体学习过程还是很快的，基本上第三天就开始尝试上手开发了。
第一天 ：两倍速看完了慕课网 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 且在 微信平台配置过白名单
预览和体验版能够临时在微信中点击小程序右上角的三个点，开启调试模式绕过

测试中，本地编译预览和体验版区别

本地编译的预览的每次都得更新二维码，体验版只有上传上去就行了，微信会自动更新小程序体验版

层级问题：echarts 层级最高，所以弹出层不会笼罩它，解决办法是弹出层呈现的时候先销毁，弹出层敞开再初始化.留神不要用 hidden, 因为这里有个 Bug，echarts 显隐管制的话，绑定的事件会生效
初始化机会问题：有可能接口数据申请完，挂载 echarts 上数据的时候，echarts 还未初始化胜利（偶发），我这里应用的是公布订阅解决这个问题。
echart 容器肯定要设置初始宽高，否则有可能渲染不进去
真机调试渲染不进去

因为咱们有权限管制 tab, 所以我采纳的自定义 tabbar, 原本想着应用微信自带的自定义 tabbar, 省点代码，没想到切换的时候很大几率 tabbar 隐没。辣鸡微信，节约爹一天工夫，调试的时候曾一度狐疑自我，没有 get 到点上（switchtab）, 最初第二天我本人写了一个自定义组件 tabbar 解决的。最初给个问题链接 https://developers.weixin.qq….

这个很不好，拦截器拦挡到谬误，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);
    }
  }
})

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})
  );
}

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

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

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

关于小程序:小程序开发快速入门

学习过程

常识纲要

提测与上线

`坑坑坑（从大到小）`

1.echarts 小程序中应用 echart 坑真心多

2.自定义 tabbar

3.hideloading 会把 showtoast 的 toast 也消掉

4. promise 没有 finally 办法，须要本人实现

5. slot 不带作用域插槽性能

序幕