乐趣区

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

jiezi

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

测试号

首先，须要一个用于开发的微信小程序测试账号。申请地址为：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 属性中申明，参考官网文档。后期可应用created。

模板

文本插值

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

data: {foo: 'foo'}
<view> {{foo}} </view>

属性绑定

以后组件（页面）

data: {foo: 'foo'}
<yz-foo foo="{{foo}}"></yz-foo>

yz-foo 组件:

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

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

在组件（页面）初始化时，会将 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);
}

须要特地留神的是，微信小程序是值传递，而不是地址传递。如果此时获取到的 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 浏览器是怎么一点点沦亡的，而后多改改外部的考核导向，能够让一些保护文档工作的员工安心地保护文档。

退出移动版