前端圈：微信小程序开发一周总结

编辑器

我直接用 vscode（其它编辑器同理，预览还是用的微信开发工具），语法高亮将 wxml 设置成 html, wxss 设置成 css

1. "files.associations": {
2. "*.wxss": "css",
3. "*.wxml": "html"
4. }

也可以安装小程序相关插件

开始写代码

• 首先需要完整看完微信小程序文档（框架，组件和 API），方便后面用到时查找。

• view 组件对应 html 里的 div

• text 对应 span

• wxss 里选择器只支持 element, #id, .className, ::after, ::before

公用组件

项目目录里新建 components ，按类似 pages 目录结构，将每个组件的模板，样式和 js 文件放在同一个文件夹

• 模板可以直接  或者需要传值的使用  + 

• 样式使用 @import 导入

• js 使用 require 引入到页面，然后使用下面的 mergePage 来加载到页面对象中。

mergePage

• 组件的加载

使用mergePage方法将所有组件方法及页面事件注册到页面对象

• 组件的编写方式

组件里使用可以 this.setData 来更新页面数据，或者注册 onLoad，onShow等页面事件，mergePage 的最后一个参数的事件会最先调用。

• mergePage 的源码

es 6

箭头函数，函数参数默认值及解析构

一些函数参数也可以直接使用默认参数。

拓展运算符 和 对象属性简写

在给 template 传 data 参数时，可以使用对象属性简写，如

1. <template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>

这样 template 中可以使用变量为 obj 对象的所有 key，以及 id 和 name

模板字符串

小程序里可以直接方便的使用 es 6 模板字符串

let url = `${app.globalData.API_PREFIX}/cart/add`;

更多 es 6 特性

请参考：https://uedsky.com/2016-06/es6/ ，也可以参考下一篇es6语法简介

其它注意

• wx.showToast 图标只支持"success"、"loading"，错误提示得自定义

• 如果 template 里面的变量没值，请看 data 传进来没有。

• 开发工具（v0.10.102800）可以用下面方法添加接口请求域名，遗憾的是微信里不行。

• 所有页面的 JS 会在启动时立即执行，而不是打开页面才执行，所以一些写在全局的代码应该尽量放到　onLoad 之后，下面是从调试 source 里看到加载的代码：

   

  1. define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){
  2. 'use strict';
  3. var app = getApp();
  4. var util = require('../../../utils/util');
  5. var ErrorMsg = require('../../../components/error-msg/error-msg');
  6. var AddressPicker = require('../../../components/address-picker/address-picker');
  7.  
  8. Page(util.mergePage({
  9. // 页面代码省略
  10. }, AddressPicker, ErrorMsg));
  11. //# sourceMappingURL=data:application/json;...});
  12. require("pages/index/index.js")

参考