sitemap
配置
微信里的配置文件
项目的导航配置文件
方便微信收录
project.config.json
文件
配置项目的功能和信息
使用的一些组件
wxss
文件
配置页面css
样式
app
里定义一些全局的css
样式
json
文件
全局的公共的配置文件 ,配置小程序的路由和窗口样式
pages 路由
放置一些写好的页面
app.json
是全局的配置文件
window 视窗
navigationBarBackgroundColor
视窗的颜色
navigationBarTitleText
视窗的文字
navigationBarTextStyle
视窗的颜色
js
文件
小程序的逻辑处理文件
util.js
放置一些小工具
自己封装的常用的js
插件
渲染
组件
表单组件
switch开关选择器
<switch></switch>
WXML语法
1.页面配置
每一个小程序的页面可以使用.json
文件来对本页面的窗口配置
页面的配置会覆盖app.json
的window
中相同的配置
{
"navigationBarBackgroundColor": "#f0f",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "导航栏里的文字",
"backgroundColor":"#eee",
"backgroundTextStyle": "light"
}
2.数据渲染
使用双大括号形式渲染{{con}}
绑定也可以使用双大括号
<view class='{{name}}'></view>
在双大括号内可以写js
代码
<checkbox checked="{{false}}"></checkbox>
<checkbox></checkbox>
hidden
相当于Vue
里面的v-show
在属性里面添加display:none
<view hidden='{{ifShow?true:false}}'></view>
Page({
data:{
ifShow:true
}
})
if
相当于Vue
里面的v-if
直接在Dom
树种移除了
<view wx:if='{{true}}'></view>
if语法里有else
elif
<view wx:if='20 >= 22'>显示第一个</view>
<view wx:elif='20 >= 21'>显示第二个</view>
<view wx:else='20 >= 2'>显示最后一个</view>
for
循环渲染标签
类似于Vue
<view wx:for='{{arr}}' wx:key='index'>{{index}} |{{item.name}}</view>
在微信小程序里默认有item
和index
如果要想改 ,使用wx:for-itme
或wx:for-index
<view wx:for='{{arr}}' wx:for-item='value' wx:for-index='i' wx:key='*this'></view>
fou
里的语法*this
代表的数组里的每一项
index是数组的下标
item是当前项
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态使用wx:key
wx:key
进行for
循环的时候要绑定一个key
来保证数据的唯一性
当数据改变触发渲染层重新渲染的时候 ,会校正带有key
的组件, 框架会确保他们被重新排序, 而不从新创建, 以确保组件保持自身的状态, 并提高列表渲染是的效率
标签
<view></view>类似html里的div
<text>文字标签</text>
<checkbox>按钮</checkbox>
事件函数
在标签里绑定的事件函数写在page
里面
<button bindtap='goudan'>按钮</button>
Page({
data: {},
goudan(){
console.log(111)
}
})
动态更新数据
在微信小程序里面如果动态的更新了数据是不会自动发生变化的需要执行一个函数
this.estData({})
函数里面是一个对象,标示的你要更新的值
Page({
data:{
list:[1,2,3]
},
goudan(){
let list = this.data.list
list.push(9)
this.setData({
list:list
})//
}
})
3.模板
微信小程序也和vue
一样可以模块化开发
定义模板
使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用模板
使用 is
属性,声明需要的使用的模板,然后将模板所需要的 data
传入,如:
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
WXSS
语法
自适应宽高单位用rpx
生命周期函数
监听页面加载
onLoad(){
//
}
监听页面初次渲染完成
onReady(){
//
}
监听页面显示
onShow(){
//
}
监听页面隐藏
onHide(){
//
}
监听页面卸载
onUnload(){
//
}
页面事件处理函数
监听用户下拉
onPullDownRefresh(){}
监听用户上拉触底
onReachBottom(){}
用户点击右上角分享
onShareAppMessage(){}