Willdark

每一个不曾起舞的日子,都是对生命的辜负

小程序学习的一些笔记(上)

一、开发前了解
1.小程序开发对于有前端基础的同学简直是一大福音,学起来的时候未免有一种相见恨晚的感觉,简单梳理一下它们的关系。

.wxml=.html .wxss=.css .js=.js .json=.json

小程序偏向的是模块化的开发,具体可阅读小程序的官方API文档。
2.在小程序开发中可以使用的一种布局,弹性布局(display:flex;)也很好用。
3.在小程序开发的过程中,有一个很强大的自适应单位(rpx),转化关系如下:

1pt(逻辑像素)=1rpx=0.5px(物理像素)

4.在rpx和px之间怎么选择,一个小建议:控制两个元素水平之间的距离建议用rpx,控制两个元素垂直的间距建议用px,因为在手机中的宽度一般有限,更需要根据手机的分辨率来进行自适应,而高度则不可以一直滚动,可以用px保持固有的距离。
二、关于开发过程
1.在创建页面配置文件时,文件为空时会编译出错,需为页面.json文件添加一个{}。

2.在页面的配置文件中,如index.json没有其他如pages的配置,只可以配置当前windows的内容,可以无需

代码

{
“window”:{
“navigationBarBackgroundColor”: “#fff”,
}
}


直接

代码

{
“navigationBarBackgroundColor”:”#fff”
}


3.使用swiper组件时,对swiper-item设置宽高属性无效,因为swiper-item仅可放置在<swiper/>组件中,宽高自动设置为100%。应对swiper组件进行css的设置,swiper-item里面放置image标签时,还应对image标签设置css属性。

4.小程序生命周期函数执行的顺序:onLoad->onShow->onReady。

5.小程序里的数据绑定是单向绑定而不是双向绑定:即在js脚本文件里改变数据可以同步在wxml文件中,而在wxml中改变的数据却不能同步改变到js脚本文件中。

6.当一些属性需要设置为false时,如vertical=”false”设置swiper组件的滚动方式为水平时会发现不起作用,原因是小程序会把false解析为一个布尔值,只要非空,都会显示为真,具体的解决办法是可以采用数据绑定的形式,如vertical=”{{false}}”,小程序在解析时会把它解析false从而达到效果,其他类似的属性亦然。

7.控制元素的显示和隐藏可以用wx:if=”{{condition}}”,然后在js脚本文件里面定义condition的true或false来达到显示和隐藏的效果。

8.在小程序里出现了一个标签对,可以吧这个标签对理解为一对{},在标签对里面的元素构成一个整体,在使用for循环的时候用的较多。

9.在事件处理中,点击页面跳转的方法wx.navigateTo({});和wx.redirectTo({});中,前者表示父子关系的页面跳转,即在自己页面中可点击左上角的返回回到父页面,而后者是平行关系的跳转,跳转后没有返回键返回原来的页面。前者在执行时调用生命周期函数onHide(),后者在执行时调用生命周期函数onUnload()。

10.事件绑定中,bind和catch的区别是:bind绑定的冒泡事件可以向上冒泡,触发父元素帮定的事件,而catch绑定的则会阻止该事件的冒泡,从而不会触发父元素绑定的事件。

11.在使用require(path)函数请求外部数据时,path的路径必须采用相对路径而不能使用绝对路径,不然会报错!
如: var postData = require(‘../../data/post-data.js’);

12.关于小程序里面的数据引用,直接贴代码

用本地js文件模拟数据库进行数据存储(如:post-data.js)

var local_database = [
{
date: “Sep 18 2016”,
content: “本地测试”,
reading: “112”,
collection: “96”,
},
{
date: “Sep 25 2016”,
content: “本地测试1”,
reading: “112”,
collection: “96”,
},

]

// 还要在数据文件末定义一个出口
module.exports = {
postList:local_database,
}

要引用的js文件里(如:post.js)

// 定义一个变量接受外部js穿过来的数据 只能使用相对路径
var postData = require(‘../../data/post-data.js’);
//然后在onLoad方法里设置数据
onLoad: function (options) {
// 方法一  直接赋值法
// data.postList = postData.postList;
// 等同于把以上json数组的内容复制到data:{}的里面
// 方法二,setData法
this.setData({
post_key:postData.postList
});
},

引用的wxml文件(如:post.wxml)

//如果使用方法一需要把post_key改为postItem这样子对应
<block wx:for='{{post_key}}’ wx:for-item=’item’>
<templateis = ‘postItem’data = ‘{{item}}’/>
</block>
13.在小程序编程思想里,模板化的开发显得尤为重要,template刚好可以满足我们,当要编写重复的代码时可以把这段代码放到另一个文件的template的模板化标签里面。直接上代码:

需要循环的wxml文件post.wxml

<!–头文件引入,注意要用/标签结束符,不然会报错 –>
<import src=’post-item/post-item-template.wxml’ />
<!–内容实现–>
<block wx:for='{{post_key}}’ wx:for-item=’item’>
<!–注意要用/标签结束符,不然会报错 –>
<templateis = ‘postItem’data = ‘{{item}}’/>
</block>

模板放置的文件post-item-template.wxml

<!–模块化文件 –>
<template name=’postItem’>
<!–代码区域–>
</template>

wxss的复用

/*直接引入在模块化里的css文件即可 */
@import “post-item/post-item-template.wxss”;

14.小程序最骚展开代码之“…”,直接看代码:

没有用最骚代码之前要这样写

//模板化文件的wxml
<template name=’postItem’>
<textclass=’post-data’>{{item.date}}</text>
<textclass=’post-title’>{{item.title}}</text>
//要写很多次item
</template>
//调用模板化文件里的wxml
<block wx:for='{{post_key}}’ wx:for-item=’item’>
<templateis = ‘postItem’data = ‘{{item}}’/>
</block>

使用最骚代码之后可以这样简写

//模板化文件的wxml
<template name=’postItem’>
<textclass=’post-data’>{{date}}</text>
<textclass=’post-title’>{{title}}</text>
//可以省略item不写 要在调用模板化文件里面的item前面加上…
</template>
//调用模板化文件里的wxml
<block wx:for='{{post_key}}’ wx:for-item=’item’>
//…的意思是可以吧里面的json数据进行铺开的意思
<templateis = ‘postItem’data = ‘{{…item}}’/>
</block>

PS:template是占位符,当模板加载到当前wxml时,template会不存在也页面上,所以不能为template添加时间绑定,如需添加事件绑定,可在template外加一层view标签,然后为view标签添加事件绑定。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注