微信小程序开发笔记

微信小程序

框架

Wepy

自定义组件

• 实例写法
  
• 高级用法
  • 组件传值
    • 动态传值
      
    • 静态传值
      
  • 组件加载时机
    之前一直认为，组件是在页面写入组件标签时才开始触发加载。今天在看控制台日志的时候，发现即使没写组件标签，只要components注册了该组件，也会触发组件加载。官方文档如下：
    
  • 组件生命周期
    如果在使用wepy框架开发小程序时，组件生命周期只支持OnLoad，与小程序原生生命周期不一样，这里一定要注意。
  • 循环渲染

  当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签，代码如下：

  /**
  project
  └── src
      ├── components
      |   └── child.wpy
      ├── pages
      |   ├── index.wpy    index 页面配置、结构、样式、逻辑
      |   └── log.wpy      log 页面配置、结构、样式、逻辑
      └──app.wpy           小程序配置项（全局样式配置、声明钩子等）
  **/
  
  // index.wpy
  
  <template>
      <!-- 注意，使用for属性，而不是使用wx:for属性 -->
      <repeat for="{{list}}" key="index" index="index" item="item">
          <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
          <child :item="item"></child>
      </repeat>
  </template>
  
  <script>
      import wepy from 'wepy';
      // 引入child组件文件
      import Child from '../components/child';
  
      export default class Index extends wepy.page {
          components = {
              // 声明页面中要使用到的Child组件的ID为child
              child: Child
          }
  
          data = {
              list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
          }
      }
  </script>
  

  需要注意的是WePY 1.x 版本中，组件使用的是静态编译组件，即组件是在编译阶段编译进页面的，每个组件都是唯一的一个实例，目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性

功能特性

• 支持加载外部NPM包
  
  疑问：对这句话一开始一直模棱两可，只知道在wpy的标签中，可以直接import项目node_modules文件下的模块，而且不用写路径，直接写模块名称即可，而且不用写require，直接写import即可。比如在声明一个wepy页面时，我们需要引入wepy模块，只需要import wepy from 'wepy'。
  原因：wepy在编译时，采用的是Babel进行编译，会将import转换成require，如下图
  
  这是目录dist\pages\home下的一个页面编译后的文件，import被转换成了require。个人认为腾讯wepy说明文档不应该直接说会递归遍历代码中的require，而是应该编译之后代码中的require，这样子会更准确些。

原生

自定义组件

• https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

• https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

• 组件生命周期

  
  

样式

• 样式导入
  路径要填相对路径
• 全局样式与局部样式
  
  需要注意的是，这里只说了app和page之间的样式关系，但没有说页面和组件样式的关系，页面和组件的样式关系如下：
  

布局

事件

Page

• 事件处理函数
  • onShareAppMessage
    
    微信目前转发只能通过用户点击按钮的形式进行操作，给开发带来了很多不便。比如你想在点击分享的时候，向分享函数传参，不能直接通过方法名(参数）的形式进行传参，需要借助小程序的事件对象属性dataset进行传参，当然还有其它方式，在这里只描述借助dataset属性，下面给出代码：

    <button open-type="share" plain data-mydata="{{entity}}"></button>
    

    /**
     * 页面分享
     */
    onShareAppMessage(res) {
      // 来自页面内转发按钮
      if (res.from === 'button') {
        console.log(res.target.dataset.mydata);
      }else {
        // 来自页面右上角菜单
    	return {
    	      title: '自定义转发标题',
    	      path: '/page/user?id=123'
    	}
      }
    }
    

• 页面路由
  
  需要注意的是，跳转的页面路径一定要记得在全局配置文件app.json的pages属性添加页面路径，否则即使页面路径正确，页面也无法正常跳转，app.json的配置格式如下
  
  

异常

• [xmldom error] element parse error: Error: invalid attribute::no
  在引用子组件时，使用了子组件未定义的属性‘no’