微信小程序

什么是微信小程序？

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

小程序：

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

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

开发准备

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

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

2.开发工具的准备 微信开发者工具 下载地址：developers.weixin.qq.com/miniprogram…

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

helloword

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

小程序的全局配置

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

app.json developers.weixin.qq.com/miniprogram…

小程序页面配置

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

developers.weixin.qq.com/miniprogram…

wxml

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

数据绑定

developers.weixin.qq.com/miniprogram…

属性插入变量

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

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

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

小程序组件

developers.weixin.qq.com/miniprogram…

view

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

text

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

navigator

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<navigator url="../all/all" open-type="redirect">点我去详情页面</navigator>
 
<!-- navigator页面链接这个导航  默认只能跳转到  没有在tabbar绑定过的页面 -->
<!-- <navigator url="../user/user" >点我去用户页面</navigator> -->

<!-- 那么默认没有办法跳转 但是我就是想跳转怎么办？  那么在此时就要给当前这个跳转
组件添加他的open-type属性  并且写入switchTab属性值  这个属性值的意思就是跳转tabbar页面
 -->
<navigator url="../user/user"  open-type="switchTab">点我去用户页面</navigator>

小程序自定义组件

在小程序中呵呵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的方式在事件的组件上面添加一个自定义事件

<!-- 小程序中 如果我们要完成函数的参数传递  那么我们需要使用data-自定义属性的方式来完成 -->
<button data-xiaoming="我是参数" catchtap="fun">点我调用函数传递参数</button>

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

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

数据请求

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

developers.weixin.qq.com/miniprogram…

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

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

developers.weixin.qq.com/miniprogram…

小程序页面参数传递

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

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

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

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