微信小程序

什么是微信小程序？

运行在微信中的一个扩展应用

小程序：

1.触手可及：单个小程序的体积不能大于2mb（秒开）

2.用完即走：因为小程序的体积很小 所以大家不需要担心他占用我们的手机储存

开发准备

1.注册开发者（微信小程序）在微信公众平台中 进行注册与扫码登录 微信公众平台

注册的时候 个人信息需要填写真实有效的信息

2.开发工具的准备 微信开发者工具 下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

3.开发工具的安装 微信开发者工具是一个国人开发的应用 所以大家在安装的时候 随意安装 没有什么特殊的要求

helloword

我们打开微信开发者工具创建项目 填入指定内容

小程序的全局配置

写在app。json中的配置对所有页面都生效

app.json 全局配置 | 微信开放文档

小程序页面配置

就是对指定一个页面生效 在每个页面中 都会又一个json文件 那么这个文件中我们可以使用原来在app.json中的一些配置来优化指定页面 如果我们在页面中配置了相关配置 那么就会覆盖全局配置

页面配置 | 微信开放文档

wxml

就是等同于html 只是微信在此基础之上进行了优化------ 腾讯给我们提供了一整套现成的标签 称之为组件

数据绑定

数据绑定 | 微信开放文档

属性插入变量

vue中属性插变量使用的是 v-bind

react中使用的是 属性={xxxxx}

小程序中使用的是 属性="{{变量}}"

小程序组件

视图容器 | 微信开放文档

view

视图容器------类似于原来的div

text

文本 --- 在小程序中所有文字都是用他 忘掉之前学的 h p em 等等标签吧

navigator

页面链接页面导航 在小程序中除了在tabbar中设置页面跳转之外 还可以通过navigator组件来控制页面的跳转 （因为tabbar只能控制5个页面的跳转但是在一个项目中 页面的数量肯定是大于5个的 而且 tabbar只能在页面的最下面显示 不够灵活 所以我们除了这tabbar跳转之外还要学习navigator）

pages/home/home.wxml
点我去详情页面
 
​
点我去用户页面

小程序自定义组件

在小程序中呵呵vue react一样都可以让我们自己来定义组件 方便ui的复用

1.在与pages等文件夹同级创建components文件夹用来容纳我们的组件

2.新建对应的组件文件 （一个组件也是由js json wxml wxss组成）

3.在想使用的页面中 找到对应的json 进行引用 然后在对应的页面中可以直接使用

{
  "usingComponents": {
    "Link":"../../components/link/link"
  }
}

小程序组件传值

正向传值 properties

小程序事件 事件分类

事件分为冒泡事件和非冒泡事件：

冒泡事件bind：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件catch：当一个组件上的事件被触发后微信小程序组件传值，该事件不会向父节点传递

类型触发条件最低版本

touchstart

手指触摸动作开始

touchmove

手指触摸后移动

touchcancel

手指触摸动作被打断，如来电提醒，弹窗

touchend

手指触摸动作结束

tap

手指触摸后马上离开

longpress

手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

1.5.0

longtap

手指触摸后微信小程序组件传值，超过350ms再离开（推荐使用 longpress 事件代替）

transitionend

会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart

会在一个 WXSS animation 动画开始时触发

animationiteration

会在一个 WXSS animation 一次迭代结束时触发

animationend

会在一个 WXSS animation 动画完成时触发

touchforcechange

在支持 3D Touch 的 iPhone 设备，重按时会触发

1.9.90

函数参数传递

1.使用data-xxx的方式在事件的组件上面添加一个自定义事件

点我调用函数传递参数

2.在函数中使用event事件对象来得到标签上面的属性

  fun(event){
    console.log("我是一个函数么么哒",event.currentTarget.dataset.xiaoming);
  },

数据请求

我们可以使用微信小程序中内置的request方法来进行异步的操作

RequestTask | 微信开放文档

发送异步操作你就可以使用上面的方法 但是默认请求的话 会出现如下问题

http://localhost:8888 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html(env: Windows,mp,1.06.2209190; lib: 2.19.4)

从错误中我们知道 不在以下 request 合法域名列表中这个是什么意思呢？你在小程序中 发送的所有请求 都必须在微信小程序官方提前配置（他要监控你所有的请求地址 放置 你在微信小程序中 去弄一些违反网络环境的一些东西）

1.在开发的时候

在开发的时候我们只想本地测试下 如果配置和法域名比较麻烦（因为合法域名的配置 前提是 当前这个请求地址 不能是localhost 而是一个真正在互联网上报备过的一个服务器）

我们可以在开发的时候 先关闭这个域名校验 等开发完了 上线了 在去吧这个域名校验打开

2.在真正线上的时候

上线的时候你就需要配置合法语名校验 微信公众平台中进行配置

页面生命周期

我们在上面请求的时候需要让程序自动帮助我们进行数据请求的发送 所以 我们就需要使用微信小程序中页面的生命周期

​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
​
  },
​
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
​
  },
​
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
​
  },
​
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
​
  },
​
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
​
  },

组件的生命周期 data的数据修改

this.setData()

tabbar修改相关api

wx.setTabBarBadge(Object object) | 微信开放文档

小程序页面参数传递

1 在路由导航的时候把要传递的参数拼接到路径后面

   // 我现在已经知道了我们要传递的参数了  那么接下来我怎么把这个参数传递到详情页面
              wx.navigateTo({
                url: '../../pages/all/all?listdata='+event.currentTarget.dataset.xiaoming,
              })

2 在想接收数据的页面生命周期钩子中直接获取

在接收的页面onLoad 生命周期钩子中打印他内置的options形参即可得到数据

设备api

wx.stopLocationUpdate(Object object) | 微信开放文档

位置api

wx.stopLocationUpdate(Object object) | 微信开放文档

配置开发者权限

我们在开发小程序的时候 如果这个项目不是我们写的 那么就需要让别人吧我们加入到小程序的开发列队中

告诉你们的项目经理让他把你们进行添加

让项目的管理员 登录微信公众平台-----》选择管理下面的成员管理----》项目成员 点击编辑 添加你为开发者权限即可

wxss

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

rpx尺寸单位 样式导入

WXSS | 微信开放文档

分包/拆包---subpackages

在微信小程序中 单个文件的体积不能大于2mb 如果大于2mb 那么我们的项目就没有办法正常的预览与提交上线

那么我们就可以通过分包 来吧原来一个项目大于2mb的 通过分包分成多个 那么每一个就可以小于2mb正常预览预提交

使用分包 | 微信开放文档

上线 用户登录

小程序登录 | 微信开放文档