【微信小程序开发零基础入门】——微信小程序入门（2）

一、⼩程序结构⽬录

1.⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
2. ⼩程序框架提供了⾃⼰的视图层描述语⾔WXML 和 WXSS ，以及JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.1. ⼩程序⽂件结构和传统web对⽐

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

1.2. 基本的项⽬⽬录

二、⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 ⻚⾯⾃⼰的page.json
注意：配置文件中不能出现注释

2.1. 全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

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

字段的含义

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序
   ⻚⾯定义在哪个⽬录。
2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
3. 完整的配置信息请参考 app.json配置

2.1.1. tabbar

2.2. ⻚⾯配置page.json

1.这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。
2.开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。
3.⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json的 window 中相同的配置项。

2.3. sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引

三、模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

3.1. 数据绑定

3.1.1. 普通写法

<view> {
   {
    message }} </view>

Page({
   
  data: {
   
    message: 'Hello MINA!'
 }
})

3.1.2. 组件属性

<view id="item-{
   {id}}"> </view>

Page({
   
  data: {
   
    id: 0
 }
})

3.1.3. bool类型

不要直接写 checked=false，其计算结果是⼀个字符串

<checkbox checked="{
   {false}}"> </checkbox>

3.2. 运算

3.2.1. 三元运算

<view hidden="{
   {flag ? true : false}}"> Hidden </view>

3.2.2. 算数运算

<view> {
   {
   a + b}} + {
   {
   c}} + d </view>

Page({
   
  data: {
   
    a: 1,
    b: 2,
    c: 3
 }
})

3.2.3. 逻辑判断

<view wx:if="{
   {length > 5}}"> </view>

3.2.4. 字符串运算

<view>{
   {
   "hello" + name}}</view>

Page({
   
  data:{
   
    name: 'MINA'
 }
})

3.2.5. 注意

花括号和引号之间如果有空格，将最终被解析成为字符串

3.3. 列表渲染

3.3.1. wx:for

项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如

list:[{
   id:0,name:"炒饭"},{
   id:1,name:"炒面"}]
wx:key="id"

2. 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

代码：

<view wx:for="{
   {array}}" wx:key=&#