微信开发者小程序代码游客

一、配置文件

1、全局配置 app.json

对于这个文件，使用微信开发者工具编写有提示

vscode Alt+Shift+F 自动对齐

page:

当前项目的页面

第一行的页面默认显示

window:

• navigation 顶部导航栏相关
• backgroundTextStyle 下拉loading的样式，仅支持dark/light
• enablePullDownRefresh  是否开启下拉刷新  默认false

tabbar: 底部导航栏

• list  底部几个页面的相关信息
• color：tab上文字的默认颜色  仅支持16进制
• selectedcolor：选中文字的颜色  仅支持16进制
• background：导航栏背景颜色

2、页面配置 pagename.json

• 控制该页面的顶部导航栏
• 上拉下拉
• 添加自定义组件

3、sitemap.json 微信索引

前期开发用不到，发布时再回来补叭

二、WXML模板

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

1、数据绑定

• text 相当于span标签，行内元素，不会换行
• view 相当于div标签，块级元素，会换行
• checkbox  复选框

（1）wxml中的属性、变量大小写敏感。

（2）例：显示当前的时间：

.js文件：
{
  time: (new Date()).toString()
}

.wxml文件：
<text>当前时间：{{time}}</text>

（3）属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，如下：

<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>

<!-- 错误的写法  -->
<text data-test={{test}}> hello world </text >

 （4）没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中。

2、逻辑语法

通过{{变量名}}语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 {{ }} 内进行简单的逻辑运算。

（1）{{ }}中可以直接放置数字、字符串或者是数组

<text>{{[1,2,3]}}</text>

<!-- 输出 1,2,3 -->


<text>{{"hello world"}}</text>

<!-- 输出 hello world -->

 （2）进行简单的算术运算

<!--
{ a: 1,  b: 2, c: 3 }
-->


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


<!-- 输出 3 + 3 + d -->

 （3）字符串拼接

<!--
{ name: 'world' }
-->


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


<!-- 输出 hello world -->

（4）三元运算

<!-- 根据 a 的值是否等于 10 在页面输出不同的内容 -->
<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>

3、列表渲染——for循环

在组件上使用 wx:for

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。

（1）当出现数组的嵌套循环的时候，尤其要注意以下绑定的名称不要重名
         wx :for-item="item" wx :for-index="index"
（2）默认情况下，如果只有一层循环，我们不写
        wx :for-item="item" wx:for-index="index"
        小程序也会把循环项的名称和索引的名称item和 index

wx:key

• wx:key="唯一的值” 用来提高列表渲染的性能
• 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
• wx:key  的值以两种形式提供

• 字符串，代表所绑定循环数组中的对象的唯一属性
•  保留关键字 this ，代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

例：

.wxml：

<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>


<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> Add Number to the front </button>

.js： 

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

4、条件渲染——if else

WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

使用 wx:elif 和 wx:else 来添加一个 else 块：

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

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。

如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

5、模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<!--
item: {
  index: 0,
  msg: 'this is a template',
  time: '2022-11-11'
}
-->


<template is="msgItem" data="{{...item}}"/>

<!-- 输出
0: this is a template Time: 2022-11-11
-->

is可以动态决定具体需要渲染哪个模板，如：

<template name="odd">
  <view> odd </view>
</template>


<template name="even">
  <view> even </view>
</template>


<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>



<!-- 输出
odd
even
odd
even
odd
-->

6、引用

WXML 提供两种文件引用方式：import和include。

（1）import

import 可以在该文件中使用目标文件定义的 template，如：

在 item.wxml 中定义了一个叫 item的 template ：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用 item模板：

<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

需要注意的是， import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。

例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template。

（2）include

include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

index.wxml

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

 header.wxml

<!-- header.wxml -->
<view> header </view>

 footer.wxml

<!-- footer.wxml -->
<view> footer </view>

7、共同属性

所有wxml 标签都支持的属性称之为共同属性，。

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind*/catch*	EventHandler	组件的事件