微信小程序学习笔记（详细汇总）

---

一、微信小程序简介

1、微信小程序，小程序的一种，英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用，它实现了应用触手可及"的梦想，用户扫一扫或搜一下即可打开应用。

2、微信小程序，之前叫应用号，2017年正式上线

3、学习微信小程序之前，强烈建议先学习vue.js，学了之后再学超级快

4、微信小程序优点：

• 微信有海量用户,且粘性很高，在微信里开发产品更容易触达用户
• 推广app或公众号的成本太高
• 开发适配成本低
• 容易小规模试错,然后快速迭代
• 跨平台

---

二、微信小程序环境准备

2.1 申请帐号

1. 进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号
2. 你也可以管理你的小程序的权限，查看数据报表，发布小程序等操作。通过登录小程序后台，可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 （记得保密）

2.2 安装开发工具

前往 小程序开发工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装

2.3 编译预览

这里推荐用vs code编辑，小程序开发工具预览

vscode 小程序开发插件
（一）minapp。支持微信小程序标签、属性的智能补全，并且提示中包含文档内容（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）。
（二）wechat-snippet。这个插件主要的功能就是代码辅助，代码片段自动完成，可以作为上个插件的补充。
（三）wxml。这款插件用于将wxml代码进行高亮显示，并且提供代码格式化的功能，可将代码格式化为较易阅读的样式。
（四）vscode weapp api 。js中的api提示

---

三、小程序代码构成

通过开发者工具快速创建了一个 QuickStart 项目，里面有以下不同类型文件：

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

四、JSON配置

配置相关的为.json文件，需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错

4.1 小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
   
  "pages":[//页面路由，在这里添加路由可以自动生成对应文件
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
   //定义小程序所有页面的顶部背景颜色，文字颜色定义等
  	//下拉 loading 的样式，仅支持 dark / light
    "backgroundTextStyle":"light",
    //导航栏的样式
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.2工具配置 project.config.json

个性化配置，例如界面颜色、编译配置等等，避免了当你换另外一台电脑重新安装工具的时候再重新配置。

4.3 页面配置 page.json

表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置，可对每个页面进行单独配置

4.4 sitemap 配置-了解即可

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

五、模板WXML

1. 标签名字有点不一样

HTML标签	div, p, span等
小程序WXML	view, button, text等

2. 多了一些 wx:if 这样的属性（界面及状态的控制）以及 { { }} 这样的表达式（数据绑定）

3. MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离
   WXML是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构

5.1 数据绑定

（一）普通写法
index.wxml

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

index.js

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

（二）组件属性
index.wxml

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

index.js

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

（三）bool类型
不要直接写 checked=“false”，其计算结果是⼀个字符串

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

5.2 运算

（一）三元运算

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

（二）if 逻辑判断

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

注意：花括号和引号之间如果有空格，将最终被解析成为字符串，切记不要留有空格

5.3 列表渲染

（一）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="id">
  {
  {index}}: {
  {item.message}}
</view>

Page({
   
  data: {
   
    array: [{
   
      id:0,
      message: 'foo',
    }, {
   
      id:1,
      message: 'bar'
    }]
  }
})

（二）block
渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{
    {[1, 2, 3]}}" wx:key="*this" >
  <view> {
  {index}}: </view>
  <view> {
  {item}} </view>
</block>

5.4 条件渲染

（一）wx:if
在框架中，使⽤ wx:if="{ {condition}}" 来判断是否需要渲染该代码块：

  <view wx:if="{
    {false}}">1</view>