微信小程序
微信小程序开发环境
文件介绍
主要由两个部分组成和html不同的是
微信小程序四层结构
分别为：
- .js 逻辑
- .json 布局
- .wxml 内容
- .wxss 主题
app.json文件
page
[1] 设置页面顺序
[2] 创建页面
windows
[1] 设置页面的主题
[2] 页面颜色
[3] 页面名字
[4] 是否可以下拉，下拉背景色
tabBar
[1] 设置下选项框的主题
[2] 通过选择不同的tabBar选择不同的页面
W[3] 设置选项框颜色
参考模板
{
"pages": [
"pages/demo01/demo01",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "恋爱助手",
"navigationBarTextStyle": "white",
"enablePullDownRefresh":true,
"backgroundColor":"#0094ff"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "我要投递",
"iconPath": "icon/bbox.png",
"selectedIconPath": "icon/gbox.png"
},
{
"pagePath": "pages/demo01/demo01",
"text": "我要标签",
"iconPath": "icon/bbox.png",
"selectedIconPath": "icon/gbox.png"
}
],
"color":"#0094ff",
"selectedColor": "#ff9400",
"position": "bottom"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
} js
参考模板
Page({
/**
* 页面的初始数据
*/
data: {
massage:"hello world",
num:1000,
Isgirl:true,
person:{
age:23,
hight:180,
weight:150,
name:"kunpeng"
},
list:[
{
id : 0,
name:'girl'
},
{
id : 1,
name:'boy'
}
]
},
})wxml
设置页面的显示内容，类似xml
- text不换行，view换行
- 标签属性使用
- bool类型充当属性 checked属性 字符串和花括号之间不要存在空格
运算 ==》表达式
- 在花括号加入表达式
- 表达式 简单的运算
- 数字的加减
- 字符串的拼接
- 三元表达式
- 语句
- 复杂的代码段
- if else
- switch
- do while
- for
列表循环
- wx:for=”“ wx:for-item=”循环项名称” wx:for-index=”循环项索引”
- wx:key=”唯一的值”用于提高列表渲染性能
- wx:for=”“ wx:for-item=”对象名称” wx:for-index=”对象索引”
block
- 占位的标签
- 写代码的时候 可以看到这个标签存在
- 页面渲染 小程序会把它移除掉
条件渲染
隐藏 if嵌套条件
wx if
wx elif
wx else
hidden
1.hidden标签频繁切换用hidden，不频繁选择if
参考模板
<!--pages/demo01/demo01.wxml--> <!--1.text不换行，view换行 --> <view>{{massage}}</view> <view>{{num}}</view> <view>是否为男人{{Isgirl}}</view> <view>{{person.age}}</view> <!--2.标签属性使用 --> <view data-num="{{num}}">自定义</view> <!--3. bool类型充当属性 checked属性 字符串和花括号之间不要存在空格 --> <view> <checkbox checked="{{Isgirl}}"></checkbox> </view> <!-- 7 运算 ==》表达式 1. 在花括号加入表达式 2. 表达式 简单的运算 1. 数字的加减 2. 字符串的拼接 3. 三元表达式 3. 语句 1.复杂的代码段 1. if else 2. switch 3. do while 4. for --> <view>{{1+1}}</view> <view>{{'1'+'1'}}</view> <view>{{10%2==0 ? '偶数' : '奇怪数'}}</view> <!-- 8. 列表循环 1. wx:for="{{数组或对象}}" wx:for-item="循环项名称" wx:for-index="循环项索引" 2. wx:key="唯一的值"用于提高列表渲染性能 1. wx:key 绑定一个普通的字符串的时候 这个字符串的名称肯定是选好数组中的对象的唯一属性 2. wx:key = "*this" 就表示你的数组是一个普通数组 *this 表示是循环项 [1,2,3,44,5] ["1","222","adfdf"] 3. 当出现数组嵌套循环的时候，注意绑定的名称不要重名 wx:for-item="循环项名称" wx:for-index="循环项索引" 4. 默认情况下不写代码 wx:for-item="循环项名称" wx:for-index="循环项索引" 小程序也会把 循环和索引设置为item和index 只有一层循环可以直接写 wx:for="{{数组或对象}}" --> <view> <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" > 索引：{{index}} -- 数值：{{item.name}} </view> </view> <view> <view wx:for="{{list}}" wx:key="id" > 索引：{{index}} -- 数值：{{item.name}} </view> </view> <!-- 对象循环 1. wx:for="{{对象}}" wx:for-item="对象名称" wx:for-index="对象索引" --> <view> <view>对象循环</view> <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age" > 属性:{{key}} -- 值:{{value}} </view> </view> <!-- 10 block 1. 占位的标签 2. 写代码的时候 可以看到这个标签存在 3. 页面渲染 小程序会把它移除掉 --> <view> <block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list" > 索引：{{index}} -- 数值：{{item.name}} </block> </view> <!-- 条件渲染 1. <view wx:if="{{true}}">隐藏</view> 2. if嵌套条件 wx if wx elif wx else 2. hidden 1.hidden --> <view> <view>条件渲染</view> <view wx:if="{{true}}">隐藏</view> <view wx:if="{{flase}}">隐藏</view> <view wx:if="{{flase}}">1</view> <view wx:elif="{{flase}}">2</view> <view wx:else>3</view> <view>-------------</view> <view hidden> hidden</view> </view>
