一.起步
微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
1.申请账号
2.安装开发者工具
3.新建项目
二.小程序代码构成
1.一个项目中生成了4
种文件
①.json
后缀的 JSON
配置文件
②.wxml
后缀的 WXML
模板文件
③.wxss
后缀的 WXSS
样式文件
④.js
后缀的 JS
脚本逻辑文件
2.JSON配置
JSON
是一种数据格式,在小程序中扮演静态配置
的角色。
在项目的根目录
有一个 app.json
和 project.config.json
,在 pages/logs
目录下还有一个 logs.json
①app.json
是当前小程序的全局配置
,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。配置内容:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
(1)pages
字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
(2)window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
②工具配置 project.config.json
每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,例如界面颜色、编译配置。就算重新安装工具或者换电脑时,个性化配置也不会丢失。
③页面配置 page.json
用来表示 pages/logs
目录下的 logs.json
这类和小程序页面相关的配置。
如果整个项目的风格是蓝色调,那么你可以在 app.json
里边声明顶部颜色是蓝色。如果每个页面都有不一样的色调来区分不同功能模块,因此提供了 page.json
,让开发者可以独立定义每个页面的一些属性。
3.JSON语法
JSON文件都是被包裹在一个大括号中 {}
,通过key-value
的方式来表达数据。JSON的Key必须包裹在一个双引号
中,一定要给 Key 值加双引号
,写成单引号是错误的。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
(1)数字,包含浮点数和整数
(2)字符串,需要包裹在双引号中
(3)Bool值,true 或者 false
(4)数组,需要包裹在方括号中 []
(5)对象,需要包裹在大括号中 {}
(6)Null
注
:JSON 文件中无法使用注释,添加注释将会报错。
4.WXML 模板
WXML 由标签、属性等等构成,和 HTML 非常相似,但是也有很多不一样的地方:
①标签名字有点不一样
HTML经常会用到的标签是 div
, p
, span
WXML 用的标签是 view
, button
, text
等等
②多了一些 wx:if
这样的属性以及 {{ }}
这样的表达式
通过 {{ }}
的语法把一个变量绑定到界面上,称为数据绑定
。还需要 if/else
, for
等控制能力描述状态和界面的关系,这些控制能力都用 wx:
开头的属性来表达。
WXML:
<text>{{msg}}</text>
JS:
this.setData({ msg: "Hello World" })
5.WXSS 样式
WXSS 具有 CSS 大部分的特性,也有一些扩充和修改。
①新增了尺寸单位rpx
,可以免去换算的烦恼,只要交给小程序底层来换算即可
②提供了全局的样式和局部样式。可以写一个 app.wxss
作为全局样式,作用于当前小程序的所有页面,局部页面样式 page.wxss
仅对当前页面生效。
③WXSS 仅支持部分 CSS 选择器
6.JS 逻辑交互
通过编写 JS 脚本文件来处理用户的操作:
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button
按钮的时候,把界面上 msg 显示成 “Hello World”,在 button 上声明一个属性: bindtap
,在 JS 文件里边声明了 clickMe
方法来响应点击操作:
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
三.小程序宿主环境
1.微信客户端给小程序所提供的环境为宿主环境
。
2.渲染层和逻辑层
小程序的运行环境分成渲染层
和逻辑层
,其中 WXML
模板和 WXSS
样式工作在渲染层
,JS
脚本工作在逻辑层
。
3.程序与页面
整个小程序只有一个 App 实例,是全部页面共享的。小程序启动后,在 app.js
定义的 App
实例的 onLaunch
回调会被执行:
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
pages/logs/logs
下包括了4种文件,微信客户端会先根据 logs.json
配置生成一个界面,顶部的颜色和文字都可以在这里边定义好。然后客户端就会装载这个页面的 WXML
结构和 WXSS
样式。最后客户端会装载 logs.js
, logs.js 的大体内容就是:
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
Page
是一个页面构造器
,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data
数据和 index.wxml
一起渲染出最终的结构。
在渲染完界面之后,页面实例就会收到一个 onLoad
的回调,你可以在这个回调处理你的逻辑。
4.组件
①如果需要在界面上显示地图:
<map></map>
②如果希望地图一开始的中心的经纬度是济南,需要声明地图的 longitude
(中心经度) 和 latitude
(中心纬度)两个属性:
<map longitude="济南经度" latitude="济南纬度"></map>
③如果用户点击了地图上的某个标记,可以在 js 编写 markertap
函数来处理:
<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>
5.API
①要获取用户的地理位置时,只需要:
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 纬度
var longitude = res.longitude // 经度
}
})
②调用微信扫一扫能力,只需要:
wx.scanCode({
success: (res) => {
console.log(res)
}
})