正文
微信小程序学习资料整理
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
基础篇
官网：
https://mp.weixin.qq.com/cgi-bin/wx
微信小程序：
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
微信公众号和小程序的主要区别？
、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）、实现技术区别 （公众号基于H5（html5 vue angular react ionic），小程序必须用小程序的语法开发）、用户体验 （小程序的用户体验要比 html5好一些，更接近原生app）、调用原生的能力 （微信公众号可以借助jssdk调用手机的摄像头拍照 ，调用扫描二维码等 能力有限。 小程序调用原生的能力非常强大，能实现几乎app能实现的所有功能） （调用原生的功能 *可以不开发app ）、微信app上面的入口不一样
微信小程序的应用场景：
互联网+ 物联网+ 人工智能+餐厅点餐+小程序 基于LBS小程序直接搜索附近的餐厅，进店用进行扫码点餐、支付。无人点餐：公交+小程序
公交车站放一个小程序二维码，扫一扫就知道公交什么时候来。买电影票+小程序 进入小程序直接搜附近电影院下单搞定。加油站缴费+小程序
加油下车排队缴费太麻烦，扫小程序不用下车就能解决。火车上叫餐+小程序
不用去固定车厢点餐，扫座椅后背的小程序二维码下单，乘务员给你送来。旅行+小程序
旅行酒店预订、周边攻略、目的地、游记等都可以在小程序里轻松搞定。快递+小程序
一键打开快递小程序，查看自己的订单，查看快递送达的时间，查看宝贝现在的物流情况。医疗+小程序
用小程序，提前挂号、网上排队，就医后扫码支付，直接拿药景区+小程序
扫描景点门票小程序的二维码，即可查看景区详情零售+小程序
想吃个水果或吃点零食，直接搜索附近小程序下单，送货上门。
小程序开发文档、开发工具、开发指南、体验demo
开发文档
https://developers.weixin.qq.com/miniprogram/dev/
开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
体验demo
https://developers.weixin.qq.com/miniprogram/dev/demo.html
微信开放社区
https://developers.weixin.qq.com/community/
微信小程序的目录结构
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
JSON 配置
我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。
小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：
{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
我们简单说一下这个配置各个项的含义:
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。（写好页面路径保存，可以直接生成文件）window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
其他配置项细节可以参考文档 小程序的配置 app.json 。
工具配置 project.config.json
在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 开发者工具的配置 。
页面配置 page.json
让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。
其他配置项细节可以参考文档 页面配置 。
WXML 模板
WXML 充当的就是类似 HTML 的角色。
更详细的文档可以参考 WXML
WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
WXSS在底层支持新的尺寸单位rpx。可以写一个
app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效。WXSS仅支持部分CSS选择器
更详细的文档可以参考 WXSS 。
JS 交互逻辑
通过编写 JS 脚本文件来处理用户的操作。
响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 。
微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件
<!--pages/news/news.wxml-->
<view>
{{msg}}
</view><button size='mini' bindtap="run">
执行run方法，注意触发方法不需要写()
</button><button size='mini' bindtap="getMsg">
获取msg中的值
</button><button size='mini' bindtap="setMsg">
改变msg中的值
</button>
// pages/news/news.js
Page({ /**
* 页面的初始数据
*/
data: {
msg: '小程序中的msg'
},
/**
* 自定义方法
*/
run() {
console.log('执行小程序run方法！')
},
/**
* 获取data中的值
*/
getMsg() {
// 获取data中的数据
const msg = this.data.msg
console.log(msg)
},
/**
* 设置data中的值
*/
setMsg() {
// 设置data中的数据
this.setData({
msg:'改变msg中的值'
})
console.log(this.data.msg)
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 执行自定义方法
this.getMsg()
}
})
