开发文档
1.微信小程序的环境准备
1.1注册账号
1.2获取APPID
是开发者唯一的身份认证,应用要发布要上线必须提供APPID
1.3开发工具
由于微信小程序自带开发者工具的编码体验不好,因此建议使用VS code 加微信小程序开发工具来实现编码,VS code负责敲代码,微信开发工具负责
2.第一个微信小程序
3.微信开发者工具介绍
4.小程序结构目录
4.1小程序文件结构和传统web对比
4.2基本的项目目录
5.小程序配置文件
5.1全局配置 app.json
小程序根目录下的 app.json
文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
5.1.1tabbar
5.2页面配置page.json
每一个小程序页面也可以使用同名 .json
文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json
的 window
中相同的配置项。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
5.3sltemap 配置
小程序根目录下的 sitemap.json
文件用来配置小程序及其页面是否允许被微信索引。
例1:
{
"rules":[{
"action": "allow",
"page": "*"
}]
}
所有页面都会被微信索引(默认情况)
例2:
{
"rules":[{
"action": "disallow",
"page": "path/to/page"
}]
}
配置 path/to/page
页面不被索引,其余页面允许被索引
这里不一一举例,想看更详情的内容可以到官方文档查看
6.模板语法
1 text 相当于以前web中的 span标签 行内元素 不换行
2 view 相当于以前web中的 div标签 块级元素 换行
3 checkbox 以前的复选框标签
6.1数据绑定
在js中
Page({
/**
* 页面的初始数据
*/
data: {
msg: "hello mina",
num:10000,
isgirl:false,
person:{
age:74,
height:145,
weight:200,
name:"富婆"
},
ischecked:false
},
})
在wxml中
<!-- 1 字符串 -->
<view>{
{msg}}</view>
<!-- 2 数字类型 -->
<view>{
{num}}</view>
<!-- 3 bool类型 -->
<view>是否伪娘:{
{isgirl}}</view>
<!-- 4 object类型 -->
<view>{
{person.age}}</view>
<view>{
{person.height}}</view>
<view>{
{person.weight}}</view>
<view>{
{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{
{num}}">自定义属性</view>
<!-- 6 使用bool类型充当属性 checked
字符串和花括号之间一定不要存在空格 否则会导致识别失败,以下写法是错误示范
<checkbox checked=" {
{ischecked}}"></checkbox>
-->
<view>
<checkbox checked="{
{ischecked}}"></checkbox>
</view>
6.2运算
<!-- 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>
6.3列表渲染
在js中
Page({
/**
* 页面的初始数据
*/
data: {
person:{
age:74,
height:145,
weight:200,
name:"富婆"
},
ischecked:false,
list:[
{
id:0,
name:"猪八戒"
},
{
id:1,
name:"天蓬元帅"
},
{
id:2,
name:"悟能"
},
]
},
})
在wxml中
<!-- 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","22","desv"]
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")可以省略
-->
<view>
<view wx:for="{
{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
索引:{
{index}}
--
值:{
{item.name}}
</view>
</view>
<!-- 9 对象循环
1.wx:for="{
{数组或者对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
2.循环对象的时候最好把item和index的名称都修改一些
wx:for-item="value" wx:for-index="key"
-->
<view>
<view>对象循环</view>
<view wx:for="{
{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
属性:{
{key}}
--
值:{
{value}}
</view>
</view>
<!-- 10 block 当循环某些数据或者渲染某些内容的时候,如果不想额外加一层外边的标签,可以用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>
6.4条件渲染
<!-- 11 条件渲染
1 wx:if="{
{true/false}}"
if , else , if else
wx:if 为true直接显示1 false false
wx:elif 为true显示2 false
wx:else 显示3
2 hidden
1.在标签上直接加入属性hidden 隐藏
2.hidden="{
{true}}" true 隐藏 ,false 显示
3 什么场景下用哪个
1.当标签不是频繁的切换显示优先使用wx:if,
切换显示方式:直接把标签从页面结构移除
2.当标签频繁的切换显示优先使用hidden,
切换显示方式:通过添加样式来实现
hidden属性不要和样式display 一起使用隐藏失效
-->
<view>
<view>条件渲染</view>
<view wx:if="{
{true}}">显示</view>
<view wx:if="{
{false}}">隐藏</view>
<view wx:if="{
{false}}">1</view>
<view wx:elif="{
{false}}">2</view>
<view wx:else>3</view>
<vi