微信小程序
小程序的配置文件
一个小程序应用程序会包括, 会有最基本的两种配置文件, 一种是全局的 app.json , 一种是页面自己的 page.json
注意: 配置文件中不可以出行注释
1.1 全局配置文件 app.json
app.json 是当前小程序的全局配置, 包括了小程序的所有页面路径, 界面表现, 网络超时时间, 底部 tab 等. 普通快速启动项目 里边的 app.json 配置
全局配置文件 app.json 里面的初始内容:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
注意: pages 中的文件不要加后缀名
pages 的小案例
pages 字段含义为:⽤于描述当前⼩程序所有页面路径，这是为了让微信客⼾端知道当前你的⼩程序页面定义在哪个⽬录。
我们在 pages 字段中添加一个新的 “pages/wx01/wx01” 字段, 并且放在最上面, 修改后的代码为:
{
"pages":[
"pages/wx01/wx01",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
这时我们可以清晰的看到我们的 资源管理器 中多出现了一个名为 wx01 的文件夹, 并且你的首页变了
我们可以看到以上案例做的操作有: 1) 在pages字段添加符合规则的代码可以添加一个新的子页面文件夹 2)把哪个符合规则的代码放在最前面, 他就会优先显示在模拟器的上
注意: 你只有在 微信开发者工具 中配置app.json文件才可以新增子页面, 其他的编辑器不可以
window 的小案例
window 字段含义为: 定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
window 字段修改后的代码为:
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/wx01/wx01"
],
"window":{
"backgroundTextStyle":"dark", // 下拉 loading 的样式，仅支持 dark 和 light
"navigationBarBackgroundColor": "#0094ff", // 导航栏背景颜色，如 #0094ff
"navigationBarTitleText": "我的调试窗口", // 导航栏标题文字内容
"navigationBarTextStyle":"white", // 导航栏标题颜色，仅支持 black 和 white
"enablePullDownRefresh":true, // 是否开启全局的下拉刷新。
"backgroundColor":"#0094ff" // 下拉刷新时的背景颜色
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
代码修改后模拟器的展示为:
window 字段常用属性和属性值:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #0094ff | 导航栏背景颜色，如 #0094ff |
| navigationBarTextStyle | String | white | 导航栏标题颜⾊，仅⽀持 black 和 white |
| navigationBarTitleText | String | 无 | 导航栏标题⽂字内容 |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新。 |
| backgroundColor | HexColor | #ffffff | 下拉刷新时的背景颜色 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅⽀持 dark 和 light |
微信小程序底部导航tabBar 案例
tabBar 字段含义为: 可以使底部的图标,文字显示, 还可以改变选中时和未选中时的文字颜色, 还有背景颜色等
tabBar 字段修改后的代码为:
{
"pages":[
"pages/index/index",
"pages/guc01/guc01",
"pages/logs/logs",
"pages/wx01/wx01"
],
"tabBar": {
"color": "#0094ff", // 未选择时 底部导航文字的颜色
"selectedColor": "#0094ff", // 选择时 底部导航文字的颜色
"borderStyle": "black" , // 底部导航边框的样色,仅支持 black 和 white
"list": [ // 导航配置数组,只能配置最少2个、最多5个tab。
{
"pagePath": "pages/index/index", // 页面访问地址
"text": "首页", // 导航图标下方文字
"iconPath": "icon/_home.png", // 未选择时 图标路径
"selectedIconPath": "icon/home.png" // 选中时 图标路径
},
{
"pagePath": "pages/guc01/guc01",
"text": "购物车",
"iconPath": "icon/_gwc.png",
"selectedIconPath": "icon/gwc.png"
}
]
},
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "我的调试窗口",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":true,
"backgroundColor":"#0094ff"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
因为一个图标就代表一个子页面, 所以先要在 pages 字段中配置子页面, 代码修改后模拟器的展示为:
tabBar 字段常用属性和属性值:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| tabBar | Object | 指底部的 导航配置属性 | |
| color | HexColor | #0094ff | 未选择时 底部导航文字的颜色 |
| selectedColor | HexColor | #0094ff | 选择时 底部导航文字的颜色 |
| borderStyle | String | black | 底部导航边框的样色,仅支持 black 和 white |
| list | Array | 导航配置数组,只能配置最少2个、最多5个tab。 | |
| pagePath | String | 页面访问地址 | |
| text | String | 导航图标下方文字 | |
| iconPath | String | 未选择时 图标路径 | |
| selectedIconPath | String | 选中时 图标路径 | |
| position | String | bottom | tabBar 的位置，仅支持 top 和 bottom |
1.2 页面配置 page.json
这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。
开发者可以独立定义每个页面的⼀些属性，如顶部颜色、是否允许下拉刷新等等。
页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
代码修改后模拟器的展示为:
page.json 的字段常用属性和属性值:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #0094ff | 导航栏背景颜色，如 #0094ff |
| navigationBarTextStyle | String | white | 导航栏标题颜⾊，仅⽀持 black 和 white |
| navigationBarTitleText | String | 无 | 导航栏标题⽂字内容 |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新。 |
| backgroundColor | HexColor | #ffffff | 下拉刷新时的背景颜色 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅⽀持 dark 和 light |
| onReachBottomDistance | Number | 50 | ⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。 |
| disableScroll | Boolean | false | 设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有效，⽆法在 app.json 中设置该项 |
1.3 sitemap 配置
小程序根目录下的 sitemap.json ⽂件用于配置小程序及其页面是否允许被微信索引。
小程序的模板语法
WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构 建出页面的结构。
1.1 数据绑定
我们在js文件中写上数据和值, 然后在wxml文件中用 {{name}} 来显示它，最后我们用模拟器来展示最终页面
注意: 1) text 相当于以前web中的 span标签 行内元素 不会换行 2) view 相当于以前web中的 div标签 块级元素 会换行
// js文件中写数据
Page({
data: {
msg:'hello wxo1',
num:'100',
flage:false,
Object:{
name:'富婆',
sex:'女',
height:'160cm'
},
isObject:true,
id:0
}
})
// wxml文件中用 {{}} 显示
<!--
1. text 相当于以前web中的 span标签 行内元素 不会换行
2. view 相当于以前web中的 div标签 块级元素 会换行
-->
<!-- 1.字符串 -->
<view>{{msg}}</view>
<!-- 2.数字类型 -->
<view>{{num}}</view>
<!-- 3.bool类型 -->
<view> 你还在学习吗:{{flage}}</view>
<!-- 4.object类型 -->
<view>{{Object.name}}</view>
<view>{{Object.sex}}</view>
<view>{{Object.height}}</view>
<!-- 5.在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>
<!--
6.使用bool类型充当属性
1)字符串 花括号之间一定不要存在空格 否则会导致识别失败
<checkbox checked=" {{isObject}}"></checkbox>
-->
<view>
<checkbox checked="{{isObject}}"></checkbox>
</view>
1.2 运算
在wxml文件中来写运算，最后我们用模拟器来展示最终页面
<!--
7. 运算 => 表达式
1) 可以在花括号中加入表达式 -- "语句"
2) 表达式
就是一些简单的运算 数字运算 字符串拼接 逻辑运算
1.数字的加减
2.字符串拼接
3.三元表达式
3) 语句
1.复杂的代码段
if else ...
switch ...
do while ...
for ...
-->
<!-- 表达式 数字的加减 -->
<view>{{1+1}}</view>
<!-- 表达式 字符串拼接 -->
<view>{{1 + '1'}}</view>
<!-- 表达式 三元表达式 -->
<view>{{10%2===0 ? '偶数' : '奇数'}}</view>
1.3 列表循环
我们在js文件中写上数据, 然后在wxml文件中用 wx:for 来遍历它，最后我们用模拟器来展示最终页面
list:[
{
id:0,
name:'炒面'
},
{
id:1,
name:'蒸面'
},
{
id:2,
name:'煮面'
}
]
<!--
8.列表循环
1) wx:for"{{数组或对象}}" wx:for-item="循环的名称" wx:for-index="循环的索引"
2) wx:key="唯一的值" 用来提高列表循环的性能
1.we:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的唯一属性
2.wx:key="*this" 就表示你的数组 是一个普通的数组 *this 表示是 循环项
[1,2,3,4,5]
["1","2","3","4","5"]
3) 当出现 数组的嵌套循环的时候 尤其要注意 一下绑定的名称 不要重名
wx:for-item="item" wx:for-index="index"
4) 默认情况下 我们不写它
wx:for-item="item" wx:for-index="index"
小程序也会把 循环的名称 和 索引的名称 item 和 index
只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略
9. 对象循环
1) wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
2) 循环对象的时候 最好把 item和index的名称修改一下
wx:for=item="value" wx:for-index="key"
-->
<view>
<view
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
>
索引: {{index}}
-----
值: {{item.name}}
</view>
</view>
<view>
<view>对象循环</view>
<view
wx:for="{{Object}}"
wx:for-item="value"
wx:for-index="key"
wx:key="sex"
>
索引: {{value}}
-----
值: {{key}}
</view>
</view>
1.4 block
在wxml文件中写
<!--
10. block
1)站位符的标签
2)写代码的时候 可以看到这个标签的存在
3)页面渲染 小程序会把它移除掉
-->
<view>
<block
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id"
class="list"
>
索引: {{index}}
--
值: {{item.name}}
</block>
</view>
1.5 条件渲染
在wxml文件中写
<!--
11. 条件渲染
1) wx:if="{{true/false}}"
1.if, else , if else
wx:if
wx:elif
wx:else
2) hidden
1.在标签上直接加入属性 hidden
2.hidden="{{true}}"
3) 在上面创建下用哪个
1.当标签不是频繁的切换显示 优先使用 wx:if
直接把标签从 页面结构给移除掉
2.当标签频繁的切换显示的时候 优先使用 hidden
通过添加样式的方式来切换显示
-->
<view>
<view>条件渲染</view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">1</view>
<view wx:else>3</view>
<view>-------------------</view>
<view hidden >hidden1</view>
<view hidden="{{false}}">hidden2</view>
<view>------00------</view>
<view wx:if="{{false}}">we:if</view>
<view hidden>hidden</view>
</view>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
