微信小程序账号与工具

在线文档:https://mp.weixin.qq.com/debug/wxadoc/dev/

小程序开发者账号注册

微信公众平台:https://mp.weixin.qq.com/

小程序开发者账号注册:https://mp.weixin.qq.com/wxopen/waregister?action=step1

微信开发者工具

微信开发者工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

小程序在线Demo二维码

体验小程序官方源码:https://mp.weixin.qq.com/debug/wxadoc/dev/demo/demo.zip

微信小程序文件结构

主体文件结构

主体部分由三个文件组成,必须放在项目的根目录,如下:

文件 必填 作用
app.js 小程序逻辑
app.json 小程序公共设置
app.wxss 小程序公共样式表

页面文件结构

页面由四个文件组成,分别是:

文件类型 必填 作用
js 页面逻辑 ( 微信小程序没有window和document对象 )
wxml 页面结构 ( XML语法,不是HTML语法 )
wxss 页面样式表 ( 拓展了rpx尺寸单位,微信专属响应式像素 )
json 页面配置 ( 不能写注释,否则编译报错 )

WXML 结构_基础 (标签、组件)

组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/

常用布局标签(组件)

<view></view>                相当于    <div></div>
<text></text>                相当于    <span></span>
<image></image>                相当于    <img />
<navigator></navigator>        相当于    <a></a>
<block></block>                区块标签,不会渲染到页面

注意:image组件默认宽度300px、高度225px,很多时候我们都不需要这个默认宽高,记得手动设置宽高

常用表单标签(组件)

<button></button>
<input type="text" />                
<checkbox />
<radio/>

轮播图组件

<swiper indicator-dots="是否显示面板指示点" autoplay="是否自动切换" interval="自动切换时间间隔" duration="滑动动画时长">
    <swiper-item>
          <image src="图片路径1" width="375" height="150"/>
    </swiper-item>
    <swiper-item>
          <image src="图片路径2" width="375" height="150"/>
    </swiper-item>
</swiper>

探索:实现无缝轮播怎么办?

WXSS 样式

WXSS (WeiXin Style Sheets) 是一套样式语言。

WXSS文档: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html

WXSS 新增特性

与 CSS 相比,WXSS 扩展以下2个特性:

  • 尺寸单位 rpx ( responsive pixel 响应式像素)
  • 样式导入 @import “样式表路径”;

尺寸单位

  • rpx ( responsive pixel 响应式像素) : 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
  • 建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

JSON 配置

配置文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

app.json 配置项列表

app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

属性 类型 必填 描述
pages String Array 设置页面路径
window Object 设置默认页面的窗口表现
tabBar Object 设置底部 tab 的表现
networkTimeout Object 设置网络超时时间
debug Boolean 设置是否开启 debug 模式

如:app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "小程序标题"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "Tab栏"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

window 配置

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如”#000000”
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px

window 配置图示

window 配置注意事项

!! 注意:页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个关键词。

如:/pages/message/message.json

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "内页标题修改",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
}

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 可选值 bottom、top,设置成top是无图标

其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

属性 类型 必填 说明
pagePath String 页面路径,必须在 pages 中先定义
text String tab 上按钮文字
iconPath String 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效
selectedIconPath String 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

tabBar 配置图示

tabBar 配置注意事项

  1. 当设置 position 为 top 时,将不会显示 icon。
  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
  3. icon 大小限制为40kb,建议尺寸为 81px * 81px。

JS 行为(逻辑)

微信小程序生命周期函数

Page({
  /** 页面的初始数据 */
  data: {
  },
  /** 生命周期函数--监听页面加载 */
  onLoad: function (options) {
      console.log(options);
  },
  /** 生命周期函数--监听页面初次渲染完成 */
  onReady: function () {
  },
  /** 生命周期函数--监听页面显示 */
  onShow: function () {
  },
  /** 生命周期函数--监听页面隐藏 */
  onHide: function () {
  },
  /** 生命周期函数--监听页面卸载 */
  onUnload: function () {
  }
})

页面相关事件处理函数

 /** 页面相关事件处理函数--监听用户下拉动作 */
  onPullDownRefresh: function () {
  },
  /** 页面上拉触底事件的处理函数 */
  onReachBottom: function () {
  },
  /** 用户点击右上角分享 */
  onShareAppMessage: function () {
  }

注意事项

微信小程序没有BOM和DOM概念,所以不能使用window对象和document对象。

WXML 高级(指令、事件)

数据绑定 {{ }}

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

特别注意

  1. 花括号和引号之间不能有空格。
  2. 不要直接写 checked=”false”,其计算结果是一个字符串,转成 boolean 类型后代表真值。
<checkbox checked="false"> </checkbox>                    其计算结果是一个字符串,转成 boolean 类型后变成了 true
<checkbox checked="{{false}}"> </checkbox>                正确写法

列表渲染 wx:for

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

wx:key

主要功能:提高列表渲染时排序的效率。

wx:key 的值以两种形式提供:

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

条件渲染 wx:if wx:else wx:elif

<!--wxml-->
<view wx:if="{{length >= 80}}"> 优秀 </view>
<view wx:elif="{{length >= 60}}"> 良好 </view>
<view wx:else> 加油 </view>
// page.js
Page({
  data: {
    length: '95'
  }
})

wx:ifhidden 区别

wx:if 是否渲染, hidden 是否隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。

因此,如果需要频繁切换的情景下,用 hidden 更好。

事件

  • 事件对象可以获取额外信息,如 id, dataset(自定义属性集合), touches(触摸点坐标)。

事件绑定和冒泡

  1. 冒泡事件 bind事件类型 如 bindtap bindlongpress
  2. 非冒泡事件 catch事件类型 如 catchtap catchlongpress

常用事件类型

类型 触发条件
tap 手指触摸后马上离开
longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
<!--wxml-->
<view data-index="自定义属性" bindtap="tapHandle"> 点我触发事件 </view>
// page.js
Page({
  tapHandle: function(event) {
    console.log(event)
  }
})

事件传参注意

小程序绑定事件只能写函数名称,不能通过括号方式传参。

<!--wxml-->
<view bindtap="tapHandle(520)"> 点我触发事件 </view>                                错误,事件不能触发
<view data-index="520" bindtap="tapHandle"> 点我触发事件 </view>    
// page.js
Page({
  tapHandle: function(event) {
     console.log( event.target.dataset.index );  // 输出标签自定义属性上的index值
  }
})

WXS 脚本

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,功能类似<script>标签,主要用于在视图层定义函数(比较少用)。

注意

  1. wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
  3. wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。
  5. 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
<!--wxml-->
<wxs module="foo">
var sum = function(a,b){
  return a+b;
};
// 这里可以导出一个对象,这个对象可以直接在界面上使用 
module.exports.sum = sum;
</wxs>

<view> {{foo.sum(1,2)}} </view>

微信开发者工具常用快捷键

快捷键 说明
Shift + Alt + F 格式化代码
Ctrl + P 跳到文件
Ctrl + E 跳到最近文件
Ctrl + Shift + P 上传扫码预览
Ctrl + Shift + I 显示/隐藏调试器