小程序简介
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必需 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
一个小程序页面由四个文件组成,分别是:
文件类型 | 必需 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
小程序配置
全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
完整配置项说明请参考小程序全局配置 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
以下是一个包含了部分常用配置选项的 app.json :
{
"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"
]
}
页面配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
完整配置项说明请参考 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
例如:
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
小程序组件
小程序For 循环
wx:for = "变量" 小程序循环 item为微信封装的
<view wx:for="{{students}}">{{item.name}}-{{item.age}} </view>
获取用户信息
.wxml
<button size="mini" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" >获取</button>
.js
handleGetUserInfo(event){
console.log(event)
},
open-data 组件
type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
groupName | 拉取群名称 | 1.4.0 |
userNickName | 用户昵称 | 1.9.90 |
userAvatarUrl | 用户头像 | 1.9.90 |
userGender | 用户性别 | 1.9.90 |
userCity | 用户所在城市 | 1.9.90 |
userProvince | 用户所在省份 | 1.9.90 |
userCountry | 用户所在国家 | 1.9.90 |
userLanguage | 用户的语言 | 1.9.90 |
wxss 尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
Phone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
wxss 导入样式
@import '路径';
@import 'app.wxss';
时间运用
.wxml
<view>{{nowTime}}</view>
.js
data: {
nowTime: new Date().toLocaleString()
},
onLoad: function (options) {
setInterval(() =>{
this.setData({
nowTime: new Date().toLocaleString()
})
},1000)
},
判断运算
? 成立 : 不成立
内容隐藏
<view wx:if="{{false}}">哈哈哈</view>
hidden 隐藏的组件时存在的 相当与display : no
<view hidden='{{true}}'>呵呵</view>
带变量的模板
<template name="模板名">
<button size="mini">{{btntext}}</button>
</template>
<template is="模板名" data="{{btntext: '按钮'}}"></template>
可通过模板路径导入(import 不可逐级导入)
绝对路径
<import src="/templates/button.wxml"/>
相对路径
<import src="../../templates/button.wxml"/>
<include /> (也可以导入 相当与拷贝.wxml文件) (可逐级循环导入 类似时 父文件 导入 --> 子文件 也可以导入 --> 子文件)
<include src="/templates/button.wxml" />