打开微信开发者工具后, 新建一个新的文件。开始配置
- 首先在资源管理器中,可以看到初始文件拥有 miniprogram 文件夹, 找到app.json
在json 配置文件中, 可以查询到 "page" 属性
此时,在minprogram文件夹有会生成page的文件夹且拥有5个新的页面, 该文件为小程序中的各个子页面
"tabBar": {
"list" : [{
"pagePath": "page/index/index-1",
"text": "首页",
"iconPath": "icon/_home.png",
"selectedIconPath": "icon/home.png"
},
{
"pagePath": "page/img/img",
"text": "图片",
"iconPath": "icon/_img.png",
"selectedIconPath": "icon/img.png"
},
{
"pagePath": "page/mine/mine",
"text": "我的",
"iconPath": "icon/_my.png",
"selectedIconPath": "icon/my.png"
},
{
"pagePath": "page/search/search",
"text": "搜索",
"iconPath": "icon/_search.png",
"selectedIconPath": "icon/search.png"
},
{
"pagePath": "page/logs/logs",
"text": "视频",
"iconPath": "icon/_videocamera.png",
"selectedIconPath": "icon/videocamera.png"
}
],
"color": "#0094ff",
"seletedColor" : "#ff9400",
"backgroundColor": "#fff",
"position": "bottom"
},
生成tab 栏,, 在 "tabBar"的list属性中, 页面的前后顺序则为list中的对象的顺序
修改浏览器样式
微信数据绑定
data: {
"msg": "this is the value",
"age": 18,
isChecked: false,
list: [
{
id: 0,
name: "猪八戒"
},
{
id: 1,
name: "天蓬元帅"
},
{
id: 2,
name: "无能"
}
],
"person": {
"name": "富婆",
"age": 17,
"sex" : "girl"
}
},
//输入框的input 事件的执行逻辑
handleInput(e) {
console.log(e.detail.value)
this.setData({
num: e.detail.value
})
},
handletap(e) {
const operation = e.currentTarget.dataset.operation;
this.setData({
num : this.data.num + operation
})
},
<!--
<text> 标签相当于 <span> 标签, 是行内元素, 不会自动换行
<view> 标签相当于 <div> 标签, 是块状元素, 自动换行
在随时可修改的元素内容,使用数据绑定, 而不是将内容写死在元素标签中
-->
<text> 这是一个text标签, 且是直接在标签内直接添加字符</text>
<!-- 1 数据绑定 -->
<view>{{msg}}</view>
<!-- 2 数值 -->
<view>{{age}}</view>
<!-- 3 运算 -->
<view>{{1 + 1 }}</view>
<view>{{'1' + '1'}}</view>
<!-- 4 bool 布尔值 -->
<view>{{isChecked}}</view>
<!-- 5 三元运算符 -->
<view>{{10%2===0? 'true' : 'false'}}</view>
<!--
6 数组 for 遍历
wx:for 绑定数据要添加 双括号 {{list}}
wx:key = " 唯一的值" 提高列表渲染 的性能
1 绑定一个普通字符串的时候,那么这个字符串名称肯定是 循环数组 中的对象 唯一属性
2 wx:key = "*this" 表示你的数组 是一个普通的数组, "*this" 表示的是循环项
3 当wx:key= " 随意添加的值" 时, 小程序不会报错, 但当往后修改了项目的值后,会出现问题
当出现 数组的嵌套循环时, 尤其要注意 以下绑定的名称 不要重名
wx:for-item = "item" wx:for-index="index"
默认情况下不写, 循环的名称 索引的名称, item and index
只有一层数组的话, 可以省略" <view wx:for-item = "item" wx:for-index = "index" > "
当for值绑定了列表后, 要循环列表中的内容, 则是 使用 item. + 列表的属性值, 而不是 list.name
-->
<view wx:for="{{list}}" wx:key="id" wx:for-index="index" wx:for-item="item">
"属性" : {{index}}
--
"值" : {{item.name}}
</view>
<!--
7. 对象循环
1. wx:for="{{对象}}" wx:for-item = "对象的值" wx:for-index = "对象的属性"
<view wx:for="{{person}}" wx:for-item = "item" wx:for-index = "index" >
2. 循环对象时, 最好吧 item adn index 修改一下
item = value index= "key"
-->
<view>对象循环
<view wx:for="{{person}}" wx:for-index="key" wx:for-item="value" wx:key="age">
属性: {{key}}
--
值 : {{value}}
</view>
</view>
<!--
占位符 block
1. 占位符的标签
2. 写代码时, 标签存在
3. 页面渲染后, 标签移除
-->
<view>
<block wx:for="{{person}}" wx:for-index="key" wx:for-item="value">
属性 : {{key}}
--
值 : {{value}}
</block>
</view>
<!-- 条件渲染 -->
<view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
<view>
<view wx:if="{{false}}">faslse</view>
<view wx:elif="{{false}}">2</view>
<view>3</view>
</view>
</view>
<!-- input 绑定函数 -->
<input type="text" bindinput="handleInput" />
<view>{{num}}</view>
<!--
1 添加 input 绑定时间, bindinput
2 添加按钮绑定click bindclick or bindtap
3 给函数传参, 不可直接在绑定的函数上传参 => no => bindtap="handletap(1)"
4 将函数的参数值用自定义属性 data-operation="{{参数}}" 保存
从事件源中获取 自定义属性
-->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
占位符 <block> 在 wxml页面渲染后会移除