wx小程序学习Day1 环境准备、目录结构、配置文件、模板语法、事件绑定

生活所迫也来学小程序了哈哈
今天是学习小程序的第1天

---

---

1. 环境准备

注册账号

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

---

获取APPID

---

开发工具

之后自行挑选版本就行

---

2. 我的第一个微信小程序

第一次打开微信开发者工具的时候是需要用微信进行扫码的

点击➕号新建项目

这里的AppID暂时用测试号也可以，之后要发布的时候可以改
暂时不使用云服务

---

3. 小程序目录结构

小程序框架提供了自己的视图层描述语言WXML和WXSS，以及Javascript， 并在视图层和逻辑层提供了数据传输和事件系统，让我们写代码的时候更专注于数据怎么处理

小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

---

4. 小程序配置文件

全局配置app.json

app.json是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等
普通快速启动项目里的app.json配置：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
}

字段的含义：

• page字段：用于描述当前小程序所有的页面路径，让微信客户端知道当前对你的小程序页面定义在哪个目录
• window字段：定义小程序所有页面的顶部背景颜色，文字颜色定义

pages字段

如果我们现在想新建一个demo页面，只需要在app.json中添加这样一行代码就可以：

就会自动帮我们生成一个demo文件夹

如果想进来时默认显示demo页面，将

"pages/demo/demo"

放到最前面就行了

---

window字段

window有非常多的属性，可以在官方文档查询：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
介绍几种常用的：

• navigationBarBackgroundColor：导航栏背景颜色
  这块蓝色的就是导航栏了，注意一下这个值只能是十六进制的颜色
  
• navigationBarTextStyle：导航栏标题颜色，仅支持blackorwhite，不支持别的颜色
• navigationBarTitleText：导航栏标题文字内容
  
• enablePullDownRefresh：是否开启全局的下拉刷新，默认为false
• backgroundColor：下拉刷新的窗口的背景色，仅支持十六进制颜色
  
• backgroundTextStyle：下拉loading的样式，仅支持darkorlight
  

tabbar

做一个有四个图标的tabbar
新建四个页面

选中的图标和未选中的图标打包拖进来

对着修改下面的这个就行：

改完这样：
list接收一个数组，只能配置最少 2 个、最多 5 个 tab


tabbar也有很多属性，官方文档：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
介绍几种常用的：(这些都是跟list同级的，不要放在list里面)

• color：tab上文字默认颜色
• selectedColor：tab 上文字选中时颜色
  
  
• position：tabbar的位置，仅支持toporbottom，默认bottom

页面配置page.json

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
页面的配置只能设置app.json中部分window配置项的内容.
页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
也有很多属性，官方文档：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

---

5. 模板语法

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

数据绑定

通过 {{ }} 的语法把一个变量绑定到界面上

列表渲染

wx:for

wx:key用来提高数组渲染的性能，绑定的值有如下选择：

• string类型，表示循环项中的唯一属性
• 保留字*this，它的意思是item本身，*this代表必须是唯一的字符串或数组

默认情况下，可以不写：

wx:for-item="item"
wx:for-index="index"

循环对象的时候，wx:for-item="对象的值"，wx:for-index="对象的属性"
最好吧item和index的名称修改一下：

wx:for-item="value"
wx:for-index="key"

条件渲染

wx:if

wx:if="{{true/false}}"来判断是否需要渲染该代码块

<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>

hidden

<view hidden="{{condition}}">True</view>

• 频繁切换用hidden
• hidden自动添加了display:none，所以hidden不要跟样式display一起使用

---

6.事件绑定

输入

点击

---