微信小程序学习记要(上)

几年前小程序火爆的时候,自己也跟着学习了一下,有许多小细节需要注意的,这里做一点记录

1、图片等尺寸应该使用rpx自适应标准,素材应该选用iphone6作为标准。
遵循原则是:1px(物理像素)=1rpx=0.5pt(逻辑像素)
所以如果素材是750px,则编写尺寸则是750rpx。
2、在页面布局中,横向元素应该使用rpx,纵向大部分情况下是使用px,因为横向拉伸效果明显,需要自适应。
3、编写样式的时候,可以用class或者style。而其中规则是,一般静态的样式,不太会改变的样式就用class,一些动态的样式就用style,style每一次编译的时候都回去解析样式,性能上来说,所有都放在style里,性能会降低。
4、要让元素隐藏,可以使用wx:if="false",false的值也可以从js中绑定过来,用{{false}}表示。
5、数据绑定wx:for所传的对象的代称为“wx:for-item=item”。
6、wx:for 循环需要放在block块中,如下:

<block wx:for="{{posts_key}}">
    ......
</block>

7、点击冒泡事件:除了submit等少数事件外,其余均符合冒泡事件。即触发子元素后,父元素也会被触发。如果不想触发父元素,可以不使用bind前缀,使用catch前缀。
8、使用template模板的原因,是因为将循环代码块抽离,可以达到多个页面复用的效果,直接引入就可以使用。
9、template模板在 wx:for 循环中的使用,传递数据可以直接data="{{item}}",如下:

<block wx:for="{{posts_key}}">
    <!-- template-->
    <template is="postItem" data="{{item}}"/>
</block>

10、以下是几种引入方式:
js引入方式(必须是相对路径,不然会报错!)

var postsData = require('../../data/posts-data.js');

template在wxml中的引入(路径可以相对也可以绝对)

<import src="post-item/post-item-template.wxml"/>

样式文件在wxss中的引入

@import "post-item/post-item-template.wxss";

11、数据文件要让外部使用,需要在里面自定义一个接口,暴露出去,如下:

module.exports = {
  postList: local_database
}
Last modification:November 26th, 2019 at 10:07 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment