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

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

测试号

首先,需要一个用于开发的微信小程序测试账号。申请地址为: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

模板

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

文本插值

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

data: {
  foo: 'foo'
}
 {{foo}} 

属性绑定

当前组件(页面)

data: {foo: 'foo'}

yz-foo组件:

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

以下是官方给的仅的两个例子:
image.png

image.png

在组件(页面)初始化时,会将properties上的值传递给data

事件绑定

在微信小程序中,默认的点击事件是bindtap,注意完全是小写。比如:

image.png

自定义事件

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

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

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

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

手动渲染

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

值传递

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

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

TUCAO

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

你可能感兴趣的:(微信小程序开发)