目录
1.微信小程序项目的目录结构
- pages:
- wxml: 编写小程序界面结构的地方
- wxss: 编写小程序样式的地方
- json:编写界面配置的地方
- js:编写界面逻辑的地方
- utils: 编写工具类的地方
- app.js:创建程序实例的位置
- app.json: 编写全局配置地方
- app.wxss: 编写全局样式的地方
- project.config.json: 项目的配置文件
- sitemap.json:配置哪些网站可以被检索到
2.常用的语法
要在页面或者组件的js文件中的data属性上定义数据,
data: {
msg:"hello world",
num: 18,
},
引用数据:
通过{{ }}的方式渲染到页面中,
小程序任何需要数据的地方都需要用{{ }},包括标签内的属性
逻辑渲染:
在wxml中,可以用 wx:if={{msg}}的方法来判断是否渲染页面
同时可搭配 wx:elif={{msg}} 和 wx:else 使用
列表渲染:
用 wx:for控制属性来绑定一个数组,来利用数组中的数据来重复渲染页面,默认下标名为index,元素为item,
<block wx:for="{{newsList}}" wx:key="articleId">
//block仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
<view class="rightBoxs">
{{item.id}}---{{index}}
</view>
</block>
wx:key的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数
如果需要wx:for嵌套的话,可以wx:for-index="重新定义索引名字" wx:for-item="重新定义元素的变量名字"
3.样式
wxss和css类似,不过也有一些不同之处
在wxss之中,新定义了尺寸属性rpx为了来适应不用宽度的屏幕,在小程序中,规定所有手机的屏幕宽度都是750rpx,所以在不同尺寸的屏幕下1rpx的宽度都不同。
1rpx = (屏幕宽度/750)px
而wxss和css相比,目前支持类选择器,id选择器,元素选择器,伪元素选择器 ::before ::after
子代和后代选择器也可以用
4.小程序如何渲染
WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。
渲染层和数据相关。
逻辑层负责产生、处理数据。
逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。
5.本地存储
异步存储:
wx.setStorage({
data: {name:"嗷嗷",age:4},
//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
key: 'list',
//本地缓存中指定的 key
})
异步操作:
wx.getStorage({
key: 'list',
success(res){
console.log(res);
}
})
同步存储:
wx.setStorageSync('list1', {name:"嗷嗷",age:5})
同步操作
const list = wx.getStorageSync('list')
缓存的限制和隔离:
不用小程序的本地缓存空间上限为10mb
对不用用户的缓存进行了隔离
用户换设备之后无法在其他设备读取到当前设备数据