微信小程序开发一
官方文档路径:https://developers.weixin.qq.com/miniprogram/dev/framework/
开发工具安装
下载安装路径:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序代码构成
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件
- .wxss 后缀的 WXSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
app.json全局配置
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
属性名 | 类型 | 必填 | 描述 |
---|---|---|---|
pages | string[] | 是 | 页面路径列表 |
window | Object | 否 | 全局的默认窗口表现 |
tabBar | Object | 否 | 底部 tab 栏的表现 |
networkTimeout | Object | 否 | 各类网络请求的超时时间,单位均为毫秒。默认值60000 |
debug | boolean | 否 | 是否开启 debug 模式,默认关闭 |
functionalPages | boolean | 否 | 是否启用插件功能页,默认关闭 |
subpackages | Object[] | 否 | 分包结构配置 |
workers | string | 否 | Worker 代码放置的目录 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力,如「音乐播放」 |
plugins | Object | 否 | 使用到的插件 |
preloadRule | Object | 否 | 分包预下载规则 |
resizable | boolean | 否 | iPad 小程序是否支持屏幕旋转,默认关闭 |
navigateToMiniProgramAppIdList | string[] | 否 | 需要跳转的小程序列表 |
usingComponents | Object | 否 | 全局自定义组件配置 |
permission | Object | 否 | 小程序接口权限相关设置 |
sitemapLocation | String | 是 | 指明 sitemap.json 的位置 |
style | String | 否 | 指定使用升级后的weui样式,微信客户端 7.0 开始,UI 界面进行了大改版,配置 “style”: "v2"可表明启用新版的组件样式。 |
window配置
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | string | white | 导航栏标题颜色 |
navigationBarTitleText | string | 导航栏标题文字内容 | |
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 |
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px。 |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape |
tabBar配置
属性名 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | |
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色,仅支持十六进制颜色 | |
backgroundColor | HexColor | 是 | tab 的背景色,仅支持十六进制颜色 | |
borderStyle | string | 否 | black | tabbar 上边框的颜色, 仅支持 black / white |
list | Array | 是 | tab 的列表 | |
position | string | 否 | bottom | tabBar 的位置,仅支持 bottom / top |
custom | boolean | 否 | false | 自定义 tabBar |
tabBar list配置
属性名 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | string | 是 | 页面路径,必须在 pages 中先定义 |
text | string | 是 | tab 上按钮文字 |
iconPath | string | 否 | 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。 |
selectedIconPath | string | 否 | 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。 |
networkTimeout配置
属性名 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
request | number | 否 | 60000 | wx.request 的超时时间,单位:毫秒。 |
connectSocket | number | 否 | 60000 | wx.connectSocket 的超时时间,单位:毫秒。 |
uploadFile | number | 否 | 60000 | wx.uploadFile 的超时时间,单位:毫秒。 |
downloadFile | number | 否 | 60000 | wx.downloadFile 的超时时间,单位:毫秒。 |
permission配置
属性名 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
scope.userLocation | PermissionObject | 否 | 位置相关权限声明 |
scope.userLocation PermissionObject配置
属性名 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
desc | string | 是 | 小程序获取权限时展示的接口用途说明。最长 30 个字符 |
example:
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
}
}
页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性:
属性名 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | string | white | 导航栏标题颜色 |
navigationBarTitleText | string | 导航栏标题文字内容 | |
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 |
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px。 |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape |
disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置 |
usingComponents | Object | 页面自定义组件配置 |
WXML 模板
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
通过Mustache {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。
- 数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
- 列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
- 条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
- 模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
WXSS 样式
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:尺寸单位、样式导入。
- 尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
- 样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
框架组件上支持使用 style、class 属性来控制组件的样式。
外联样式
```
/** common.wxss **/
.small-p {
padding:5px;
}
```
```
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
```
内联样式
```
<view style="color:{{color}};" />
```
```
<view class="normal_view" />
```
JS 逻辑交互
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})