小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
微信小程序前期准备
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
申请账号
点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 , 根据文字指引,填写相应资料。
开发工具
开发工具下载, 根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。
打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!
代码构成
.json
后缀的 JSON 配置文件.wxml
后缀的 WXML 模板文件.wxss
后缀的 WXSS 样式文件.js
后缀的 JS 脚本逻辑文件
JSON 配置
我们可以看到在项目的根目录有一个 app.json
和 project.config.json
app.json 小程序配置文件
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:1
2
3
4
5
6
7
8
9{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
- pages :
小程序页面路径信息 - window :
定义全局顶部颜色,字体类型,标题信息等。
更多请查看 小程序配置文件
project.config.json 工具配置
通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 开发者工具的配置 。
WXML 模版
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS
用来描述页面的样子,JS
通常是用来处理这个页面和用户的交互。
同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml
,你会看到以下的内容:1
2
3
4
5
6
7
8
9
10
11
12<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
WXSS 样式
WXSS
具有 CSS
大部分的特性,小程序在 WXSS
也做了一些扩充和修改。
新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器
更详细的文档可以参考 WXSS 。
JS 交互逻辑
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。1
2<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button
按钮的时候,我们希望把界面上 msg
显示成 "Hello World"
,于是我们在 button
上声明一个属性: bindtap
,在 JS
文件里边声明了 clickMe
方法来响应这次点击操作:1
2
3
4
5Page({
clickMe() {
this.setData({msg: 'Hello World'})
}
})
响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。