微信小程序学习资料整理

基础篇

官网：

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"
  }
}

我们简单说一下这个配置各个项的含义:

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。（写好页面路径保存，可以直接生成文件）
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档 小程序的配置 app.json 。

工具配置 project.config.json

在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

其他配置项细节可以参考文档 开发者工具的配置 。

页面配置 page.json

让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档 页面配置 。

WXML 模板

WXML 充当的就是类似 HTML 的角色。

更详细的文档可以参考 WXML

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. WXSS在底层支持新的尺寸单位 rpx 。

2. 可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3. 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()
  }
})