如果你是微信小程序开发的初学者,同时以前还应用过一些其它的前端框架,那么在进行微信小程序开发过程中,可能须要疾速阅览以下的常识:
测试号
首先,须要一个用于开发的微信小程序测试账号。申请地址为: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层。
值传递
微信小程序的值传递,使得起码在以下两处地须要特地的留神:
- 在进行父子组件传值时须要特地的解决。父组件把对象传给了子组件,子组件此时获取到的便是父组件对象的clone。
setData({foo: foo})
被调用时,传给V层供应用的是C层中对象的clone.
TUCAO
腾讯格调----基于宏大的用户群体来绑架程序员。感觉它真该没事想想微软的IE浏览器是怎么一点点沦亡的,而后多改改外部的考核导向,能够让一些保护文档工作的员工安心地保护文档。