微信小程序开发过程中需要首先了解一些基础知识

如果你是微信小程序开发的初学者，同时以前还使用过一些其它的前端框架，那么在进行微信小程序开发过程中，可能需要快速阅览以下的知识：

测试号

首先，需要一个用于开发的微信小程序测试账号。申请地址为：https://developers.weixin.qq.com/sandbox ，然后就在微信统一的管理后台 https://mp.weixin.qq.com/ 上扫码登录时选择自己的微信小程序测试账号了。

工具

微信小程序开发原则上仅仅需要 微信开发者工具，并不需要其它的额外工具。

引用第三方包

微信小程序支持引用npm管理的第三方包，但引用的方式与传统的node.js项目并不一致。具体还得随时开发随时学习垃圾的官方文档，之所以说需要随时学习，是因为这个文档变化的比较快。

UI

官方提供的WEUI虽然解决不了所有的场景，但在初步接触时肯定够了。官方文档地址为：https://wechat-miniprogram.github.io/weui/docs/，坑的是这个DEMO上有些外链是不可用的，然后示例给的也不全，效果图也没有。这是腾讯的垃圾风格。想看具体的使用方法需要移步到：https://github.com/wechat-miniprogram/weui-miniprogram/tree/master/src/example，仅仅想看效果的话也可以简单看看 https://weui.io/

框架

此部分开始是技术相关

路由

小程序的路由就是pages，某些路由是否可用，取决于其是否被添加到app.json中的pages属性中。

{
  "pages": [
    "pages/index/index",
    "pages/login/login",
    "pages/web-view/web-view",
    "pages/questionnaire/questionnaire",
    "pages/template/template",
    "pages/final-score/final-score"
  ]
}

而pages中的第一项则为小程序的默认路由。

路由跳转的基本语法是：wx.navigateTo({url: 'pages的相对地址'}).then()，当调整的url不存在或是未在pages中时，则会出现page not found相关的错误。关于跳转的具体参数，可以查看navigateTo的注释，这个注释还是写的不错的，并不像腾讯的风格。

生命周期

小程序的生命周期有3个主要的部分够成，分别是：应用、page页面以及component组件.

应用

应用是指整下微信小程序从启动到销毁的全过程，具体请参考官方文档，前期仅使用onShow即可。onShow会在小程序初始化时执行，或是在小程序初切回来的时候执行。

page页面

页面与路由对应，所以每个路由即页面，生命周期可参考官方文档, 前期可使用onLoad方法。

component组件

组件的生命周期全部在pageLifetimes属性中声明，参考官方文档。前期可使用ready。

detached方法并不会在组件从dom消失的那一刻起就立即执行，这个方法的执行时机尚不清楚，微信小程序应该是有内部的触发时机。

组件

需要注意的是，如果在组件中需要使用 wx 对象的话，需要使用 this替待，比如在Page中我们使用wx.createSelectorQuery()，则在组件中则需要写成this.createSelectorQuery().

模板

有时候我们希望在渲染完后不进行任何的占用，则可以使用<block>标签，这等同于angular中的ng-container。

文本插值

在组件初始化时，将默认复制data中的数据至V层：

data: {
  foo: 'foo'
}

<view> {{foo}} </view>

属性绑定

当前组件（页面）

data: {foo: 'foo'}

<yz-foo foo="{{foo}}"></yz-foo>

yz-foo组件:

  properties: {
    foo: {
      value: '',
      type: String
    }
  }

以下是官方给的仅的两个例子：

属性的类型可以是Number, String, Boolean以及Object，在组件（页面）初始化时，会将properties上的值传递给data。

事件绑定

在微信小程序中，默认的点击事件是bindtap，注意完全是小写。比如：<button bindtap="onTap">点击<button>。同时，并不支持主动传参，比如以下写法是错误的<button bindtap="onTap(foo)">点击<button>.

然后在C层（页面和组件不一样，请参考： https://developers.weixin.qq.com/miniprogram/dev/reference/ap...， https://developers.weixin.qq.com/miniprogram/dev/reference/ap...）中对应创建onTap方法：

onTap(e) {
    console.log(e);
}

如果在事件被触发的同时还想获取一些额外参数（比如遍历生成了N个按钮，当按钮被点击事件触发时，我们希望知道是哪个按钮），则需要使用data-xxx来进行绑定：

<button data-foo="{{foo}}" bindtap="onTap">点击<button>

注意这样写是错误的：data-foo="foo"，然后在点击时可以通过以下方法获取到这个foo:

onTap(e) {
    console.log(e.currentTarget.dataset.foo);
}

需要特别注意的是，微信小程序的C\V层位于不同的两个上下文中，这决定其CV传值时是值传递，而不是地址传递。如果此时获取到的foo是另一个对象，而不是你以前那个了。测试如下：

    data: {
        foo: {
            id: 1
        }
    },
    onButtonTap: function (e) {
        var foo = e.currentTarget.dataset.foo;
        console.log(foo === this.data.foo);
    },

<button data-foo="{{foo}}" bindtap="onButtonTap">传值测试</button>

自定义事件

微信小程序并不需要自定义事件，子组件需要向父组件弹值时，仅仅需要指定弹值的关键字即可：

this.triggerEvent('onchangeevent', 'foo');

此时父组件在V层中进行事件绑定，并通过以下方法获取到子组件弹出的值：

<yz-foo bindonchangeevent="onChange"></yz-foo>

onChange(e) {
  console.log(e.detail);
}

手动渲染

微信小程序没有自动渲染的机制，想渲染V层的方法是调用：this.setData({foo: 'newFooValue'})，此时将进行值传递并重新渲染V层。

值传递

微信小程序的值传递，使得最少在以下两处地需要特别的注意：

1. 在进行父子组件传值时需要特别的处理。父组件把对象传给了子组件，子组件此时获取到的便是父组件对象的clone。
2. setData({foo: foo})被调用时，传给V层供使用的是C层中对象的clone.

TUCAO

腾讯风格----基于庞大的用户群体来绑架程序员。感觉它真该没事想想微软的IE浏览器是怎么一点点消亡的，然后多改改内部的考核导向，可以让一些维护文档工作的员工安心地维护文档。