微信小程序学习笔记

¶2. 环境准备

¶2.1 注册账号

建议使用全新的邮箱，没有注册过其他小程序或者公众号的。

访问注册页面，耐心完成注册即可。

¶2.2 获取APPID

由于后期调用微信小程序的接⼝等功能，需要索取开发者的小程序中的 APPID，所以在注册成功后，可登录，然后获取APPID。登录，成功后可看到如下界⾯。

¶2.3 开发工具

下载地址

微信小程序自带开发者工具，集开发、预览、调试、发布、于一身的完整开发环境。

¶3. 第一个微信小程序

注意：打开微信开发者工具，第⼀次登录的时候是需要微信扫码登录的。

¶4. 小程序项目结构

¶4.1 文件类型

小程序框架提供了自己的视图层描述语⾔WXML、WXML、 WXSS以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

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

¶4.2 项目目录

¶4.3 配置文件

一个小程序应⽤程序会包括最基本的两种配置⽂件。全局配置文件app.json和页面配置文件page.json

注意：配置文件中不能出现注释

¶4.3.1 全局配置

全局配置可以定义所有页面的⼀些共同属性，如顶部颜色、是否允许下拉刷新等等。

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

（1）pages

用于描述当前小程序所有页面的路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个⽬录。

（2）window

定义小程序所有页面的顶部背景颜色，文字颜色定义等。

（3）tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

下面是一个简单的tabBar配置案例：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    }],
    "color": "#0094ff",
    "selectedColor": "#ff9400"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

¶4.3.2 页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

下面是pages/index/index.json简单的配置案例：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0094aa",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "light",
  "backgroundColor": "#2894FF"
}

页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。

完整配置信息可参考官网page.json配置。

¶4.4 sitemap

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引。

详细介绍见官网：sitemap 配置

¶5. 模板语法

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

¶5.1 数据绑定

¶5.1.1 简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容

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

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

¶5.1.2 组件属性(需要在双引号之内)

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

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

¶5.1.3 控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> hi </view>
<checkbox checked="{{condition}}"> </checkbox>

Page({
  data: {
    condition: true
  }
})

¶5.1.4 综合案例

pages/index/index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true
  }
})

pages/index/index.wxml

<!--index.wxml-->
<view> {{ message }} </view>
<view id="item-{{id}}"> </view>
<view wx:if="{{condition}}"> hi </view>
<checkbox checked="{{condition}}"> </checkbox>

¶5.2 列表渲染

¶5.3 条件渲染