微信小程序开发一周总结

   <h2><strong>编辑器</strong></h2>    <p>我直接用 vscode（其它编辑器同理，预览还是用的微信开发工具），语法高亮将 wxml 设置成 html, wxss 设置成 css</p>    <pre>  <code class="language-javascript">"files.associations": {    "*.wxss": "css",    "*.wxml": "html"  }</code></pre>    <p>也可以安装小程序相关插件</p>    <h2><strong>开始写代码</strong></h2>    <ul>     <li> <p>首先需要完整看完微信小程序文档（框架，组件和 API），方便后面用到时查找。</p> </li>     <li> <p>view 组件对应 html 里的 div</p> </li>     <li> <p>text 对应 span</p> </li>     <li> <p>wxss 里选择器只支持 element, #id, .className, ::after, ::before</p> </li>    </ul>    <h2><strong>公用组件</strong></h2>    <p>项目目录里新建 components ，按类似 pages 目录结构，将每个组件的模板，样式和 js 文件放在同一个文件夹</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f689b9fe57ad3aac1fc165c5beb0752e.jpg"></p>    <ul>     <li> <p>模板可以直接 <include/> 或者需要传值的使用 <import/> + <template></template></p> </li>     <li> <p>样式使用 @import 导入</p> </li>     <li> <p>js 使用 require 引入到页面，然后使用下面的 mergePage 来加载到页面对象中。</p> <p><!--more--></p> </li>    </ul>    <h2><strong>mergePage</strong></h2>    <ul>     <li> <p>组件的加载</p> </li>    </ul>    <pre>  <code class="language-javascript">const ErrorMsg = require('../../../components/error-msg/error-msg');  Page(util.mergePage({    // 页面 Page 方法...    onLoad() {      // 可以直接在页面方法中调用 showErrorMsg 方法    }  }, ErrorMsg/* 更多组件也可以*/));</code></pre>    <p>使用 mergePage 方法将所有组件方法及页面事件注册到页面对象</p>    <ul>     <li> <p>组件的编写方式</p> </li>    </ul>    <pre>  <code class="language-javascript">var errorTimer;    module.exports = {    showErrorMsg(msg, cb) {      clearTimeout(errorTimer);      this.setData({        errorMsg: msg      });      errorTimer = setTimeout( () => {        this.setData({          errorMsg: false        });        cb && cb();      }, 2000);    }    // 可以在这里注册 `onLoad`，`onShow`等页面事件  }</code></pre>    <p>组件里使用可以 this.setData 来更新页面数据，或者注册 onLoad ， onShow 等页面事件， mergePage 的最后一个参数的事件会最先调用。</p>    <ul>     <li> <p>mergePage 的源码</p> </li>    </ul>    <pre>  <code class="language-javascript">/**   * 合并 Page 对象所有的方法及事件   * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置   */  function mergePage(dest, ...src) {    let args = arguments;    let eventsStack = {      onLoad: [],      onReady: [],      onShow: [],      onHide: [],      onUnload: [],      onPullDownRefresh: [],      onReachBottom: [],    };    // 保存所有的事件，最后一个参数的事件会最先调用。    for(let name in eventsStack) {      for(let i = args.length - 1; i >= 0; i--) {        args[i][name] && eventsStack[name].push(args[i][name])      }    }    Object.assign(...args);    for(let name in eventsStack) {      dest[name] = function() {        for(let i = 0; i < eventsStack[name].length; i++) {          eventsStack[name][i].apply(this, arguments);        }      }    }    return dest;  }</code></pre>    <h2><strong>es 6</strong></h2>    <h3><strong>箭头函数，函数参数默认值及解析构</strong></h3>    <pre>  <code class="language-javascript">wx.request({    complete: ({data= {}}) => {      // 1. 因为 wx.request 返回的接口数据是在 data 属性里，这里我们只要 data 属性就行了，所以直接参数解析构      // 2. 如果 failed，无 data 时，data 将为默认值 {}      if(data.code !== 0) {        // do something if request failed        return;      }      // 请求正常处理代码      // 3. 因为用的箭头函数，回调里可以正常使用 this, 访问 Page 对象的方法      // 比如 this.setData(...)    }  })</code></pre>    <p>一些函数参数也可以直接使用默认参数。</p>    <h3><strong>拓展运算符 和 对象属性简写</strong></h3>    <p>在给 template 传 data 参数时，可以使用对象属性简写，如</p>    <pre>  <code class="language-javascript"><template is="..." data="{{...obj, id: otherIdVariable, name}}"></template></code></pre>    <p>这样 template 中可以使用变量为 obj 对象的所有 key，以及 id 和 name</p>    <h3><strong>模板字符串</strong></h3>    <p>小程序里可以直接方便的使用 es 6 模板字符串</p>    <pre>  <code class="language-javascript">let url = `${app.globalData.API_PREFIX}/cart/add`;</code></pre>    <h3><strong>更多 es 6 特性</strong></h3>    <h2><strong>其它注意</strong></h2>    <ul>     <li> <p>wx.showToast 图标只支持"success"、"loading"，错误提示得自定义</p> </li>     <li> <p>如果 template 里面的变量没值，请看 data 传进来没有。</p> </li>     <li> <p>开发工具（v0.10.102800）可以用下面方法添加接口请求域名，遗憾的是微信里不行。</p> </li>    </ul>    <pre>  <code class="language-javascript">// 放到 app.js 前面   __wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');</code></pre>    <ul>     <li> <p>所有页面的 JS 会在启动时立即执行，而不是打开页面才执行，所以一些写在全局的代码应该尽量放到 onLoad 之后，下面是从调试 source 里看到加载的代码：</p> </li>    </ul>    <pre>  <code class="language-javascript">define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict';    var app = getApp();    var util = require('../../../utils/util');  var ErrorMsg = require('../../../components/error-msg/error-msg');  var AddressPicker = require('../../../components/address-picker/address-picker');    Page(util.mergePage({    // 页面代码省略  }, AddressPicker, ErrorMsg));  //# sourceMappingURL=data:application/json;...  });require("pages/index/index.js")</code></pre>    <h2><strong>参考</strong></h2>    <ul>     <li> <p><a href="/misc/goto?guid=4959724989479280247" rel="nofollow,noindex">https://mp.weixin.qq.com/debu...</a></p> </li>    </ul>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000007468931</p>    <p> </p>