前言
第一次接触微信小程序,自己还在摸索和学习中,仅以此来记录我的学习状态和遇到的问题及解决办法。
小程序的特点:
- 小程序适合做功能简单的应用
- 小程序适合做性能要求不高的应用
- 简单便捷避免用户下载app
准备工作
登录微信公共平台,进行小程序注册:https://mp.weixin.qq.com/,进入主页面之后选择设置-》开发设置,记录下开AppID(小程序ID)
下载开发微信小程序的工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
安装完成之后,开始登录,需要输入刚才记录的Apple ID或者选择微信二维码登录,页面如下:
项目里面包含了四种文件格式:
.json
后缀的JSON
配置文件.wxml
后缀的WXML
模板文件.wxss
后缀的WXSS
样式文件.js
后缀的JS
脚本逻辑文件
(一)app.json:是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json
配置内容如下:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
其中pages
字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
工具配置 project.config.json:
(二)WXML 模板:充当的就是类似 HTML
的角色
比如打开page/index/index.wxml内容如下:
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
HTML 的时候,经常会用到的标签是 div
, p
, span,
小程序的 WXML
用的标签是 view
, button
, text
等等,这些标签就是小程序给开发者包装好的基本能力,更多功能参考:https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html
(三)WXSS 样式
WXSS
具有 CSS
大部分的特性,新增加了尺寸单位,提供的全局样式和局部样式。
(四)JS 交互逻辑
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS
脚本文件来处理用户的操作。
比如index.wxml页面中定义了一个motto,我希望它显示为hello world
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
于是,我们在index.js中给他绑定一个参数:
Page({
data: {
motto: 'Hello World'
}
})