本文共 4230 字,大约阅读时间需要 14 分钟。
简易微信小程序教程一:
1.申请帐号(申请成功后即可拥有小程序开发帐号)
2.登录 ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
3.安装开发工具
前往 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 。
四类文件:
.json
后缀的 JSON
配置文件.wxml
后缀的 WXML
模板文件.wxss
后缀的 WXSS
样式文件.js
后缀的 JS
脚本逻辑文件小程序配置 app.json(当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等)
(1)app.json
配置内容如下:
{ "pages": ["pages/index/index", "pages/logs/logs"], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }}
我们简单说一下这个配置各个项的含义:
pages
字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window
字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。其他配置项细节可以参考文档 。
(2)工具配置 project.config.json
你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 。
(3)页面配置 page.json(提供了 page.json
,让开发者可以独立定义每个页面的一些属性)
其他配置项细节可以参考文档 。
WXML
充当的就是类似 HTML
的角色,和 HTML
非常相似,WXML
由标签、属性等等构成。但是也有很多不一样的地方,我们来一一阐述一下:
标签名字有点不一样
往往写 HTML 的时候,经常会用到的标签是 div
, p
, span
,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。把这些常用的组件包装起来,大大提高我们的开发效率。小程序的 WXML
用的标签是 view
, button
, text
等等,这些标签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力。
更多详细的组件讲述参考下个章节
多了一些 wx:if
这样的属性以及 { { }}
这样的表达式
在网页的一般开发流程中,我们通常会通过 JS
操作 DOM
(对应 HTML
的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS
会记录一些状态到 JS
变量里边,同时通过 DOM
API 操控 DOM
的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS
直接操控 DOM
,JS
只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路,如果你需要把一个 Hello World
的字符串显示在界面上。
WXML 是这么写 :
{ {msg}}
JS 只需要管理状态即可:
this.setData({msg: 'Hello World'})
通过 { { }}
的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if
/else
, for
等控制能力,在小程序里边,这些控制能力都用 wx:
开头的属性来表达。
更详细的文档可以参考
WXSS
具有 CSS
大部分的特性,小程序在 WXSS
也做了一些扩充和修改。
新增了尺寸单位。在写 CSS
样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS
在底层支持新的尺寸单位 rpx
,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json
, page.json
的概念相同,你可以写一个 app.wxss
作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss
仅对当前页面生效。
此外 WXSS
仅支持部分 CSS
选择器
更详细的文档可以参考 。
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS
脚本文件来处理用户的操作。
{ { msg }}
点击 button
按钮的时候,我们希望把界面上 msg
显示成 "Hello World"
,于是我们在 button
上声明一个属性: bindtap
,在 JS 文件里边声明了 clickMe
方法来响应这次点击操作:
Page({ clickMe() { this.setData({msg: 'Hello World'}) }})
响应用户的操作就是这么简单,更详细的事件可以参考文档 。
此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。更多 API 可以参考文档 。
微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地。
紧接着通过 app.json
的 pages
字段就可以知道你当前小程序的所有页面路径:
{ "pages": ["pages/index/index", "pages/logs/logs"]}
这个配置说明在 QuickStart 项目定义了两个页面,分别位于 pages/index/index
和 pages/logs/logs
。而写在 pages
字段的第一个页面就是这个小程序的首页(打开小程序看到的第一个页面)。
于是微信客户端就把首页的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个首页。
小程序启动之后,在 app.js
定义的 App
实例的 onLaunch
回调会被执行:
App({ onLaunch() { // 小程序启动之后 触发 }})
整个小程序只有一个 App 实例,是全部页面共享的,更多的事件回调参考文档 。
你可以观察到 pages/logs/logs
下其实是包括了4种文件的,微信客户端会先根据 logs.json
配置生成一个界面,顶部的颜色和文字你都可以在这个 json
文件里边定义好。紧接着客户端就会装载这个页面的 WXML
结构和 WXSS
样式。最后客户端会装载 logs.js
,你可以看到 logs.js
的大体内容就是:
Page({ data: { // 参与页面渲染的数据 logs: [] }, onLoad() { // 页面渲染后 执行 }})
Page
是一个页面构造器,这个构造器就生成了一个页面。在生成页面的时候,小程序框架会把 data
数据和 index.wxml
一起渲染出最终的结构,于是就得到了你看到的小程序的样子。
在渲染完界面之后,页面实例就会收到一个 onLoad
的回调,你可以在这个回调处理你的逻辑。
有关于 Page
构造器更多详细的文档参考 。
就像 HTML
的 div
, p
等标签一样,在小程序里边,你只需要在 WXML
写上对应的组件标签名字就可以把该组件显示在界面上。
更多的组件可以参考 。
为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。
要获取用户的地理位置时,只需要:
wx.getLocation({ type: 'wgs84', success: (res) => { const latitude = res.latitude // 纬度 const longitude = res.longitude // 经度 }})
调用微信扫一扫能力,只需要:
wx.scanCode({ success: (res) => { console.log(res) }})
需要注意的是:多数 API 的回调都是异步,你需要处理好代码逻辑的异步问题。
更多的 API 能力见 。
如果你只是一个人开发小程序,可以暂时先跳过这部分,如果是一个团队需要先了解一些概念。
为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。
在开发者工具中上传了小程序代码之后,登录 - 开发管理 - 开发版本 找到提交上传的版本。
在开发版本的列表中,点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。
需要注意的是,请开发者严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。
审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 - 开发管理 - 审核版本中可以看到通过审核的版本。
请点击发布,即可发布小程序。
有两种方式可以方便的看到小程序的
方法一:
登录 - 数据分析
点击相应的 tab 可以看到相关的数据。
方法二:
使用小程序数据助手,在微信中方便的查看运营数据
转载地址:http://ngxli.baihongyu.com/