微信小程序之旅

微信小程序之旅

• ​​一 、小程序简介​​
• ​​二、小程序的作用​​
• ​​三、准备相关材料​​
• ​​四、开发小程序必备知识​​
• ​​五、Vxml语法​​

• ​​1.数据绑定​​

• ​​生命周期钩子函数​​

• ​​2.事件绑定​​
• ​​3.模板使用​​
• ​​4.数据存储​​
• ​​5.事件委托&事件数据传递​​

• ​​轮播图片点击跳转​​
• ​​传递事件数据​​
• ​​currentTarget和target的区别​​

• ​​6.数据交互​​
• ​​7.不同页面之间通信​​

一 、小程序简介

1.[微信](file:///https://baike.baidu.com/item/微信/3905974)小程序（wei xin xiao cheng xu），简称[小程序](file:///https://baike.baidu.com/item/小程序)，英文名Mini Program，是一种不需要下载安装即可使用的[应用](file:///https://baike.baidu.com/item/应用) ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )

2. 小程序刚发布的时候要求压缩包的体积不能大于1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
3. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

二、小程序的作用

• 同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
• 通过扫一扫或者在微信搜索即可下载
• 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
• 连接线上线下
• 开发门槛低， 成本低

三、准备相关材料

1. 微信开发者工具
2. 官网：[https://mp.weixin.qq.com/](file:///https://mp.weixin.qq.com/)
3. 下载地址[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315](file:///https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315)
4. 准备小程序账号

四、开发小程序必备知识

• 小程序没有DOM对象，
• 组件化开发，具备特定功能效果的代码集合
• 体积小，单个压缩包体积不能大于2M，否则无法上线
• 小程序的四个重要文件的文件

• *.js
• *.wxml —> view结构 ----> html
• .wxss —> view样式 -----> css
• . json ----> view 数据 -----> json文件

• 小程序适配方案：rpx（response pixel）响应式像素单位

• 小程序适配单位：rpx
• 规定任何屏幕下宽度为750rpx
• 小程序会根据屏幕的宽度不同自动计算rpx值的大小
• iphone6下：1rpx = 1物理像素 = 0.5px

• 必备知识

• 理解事件机制
• 理解组件化
• 理解数据绑定
• Flex布局
• 移动端适配方案

五、Vxml语法

1.数据绑定

**概念：**和Vue一样数据可以初始化在当前页面的管理内存的data中，页面中使用的数据会自动去data里找

初始化数据

*.js文件中的data选项中。

Page({
  data: {
    motto: '你好，欢迎来到音乐世界',
    userInfo: {},
    hasUserInfo: false,
  },

使用数据

模板结构中使用双大括号{{message}}

注意事项：小程序中为单项数据流 model ---->> view

<view>{{message}}</view>

修改数据

this.setData({
    msg:'我是修改之后的数据'
})

生命周期钩子函数

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: '开启小程序之旅'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {   
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {  
  }
})

2.事件绑定

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

冒泡事件列表：网络地址 [https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html](file:///https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)

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

非冒泡事件：表单事件和自定义事件通常是非冒泡事件

[https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html](file:///https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)

• bind绑定：事件绑定不会阻止冒泡事件向上冒泡

<view bindtap="handleTap" class='start_container' bindtap="handleTap">
  <text class='start'>开启小程序之旅</text>
</view>

• catch绑定：事件绑定可以组织冒泡事件向上冒泡

<view catchtap="handleTap" class='start_container' bindtap="handleTap">
  <text class='start'>开启小程序之旅</text>
</view>

3.模板使用

组件

<view>
  <swiper indicator-dots='true' indicator-color='deepPink'>
    <swiper-item>
      <image src='/images/detail/carousel/iqiyi.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/detail/carousel/vr.png'></image>
    </swiper-item >
    <swiper-item>
      <image src='/images/detail/carousel/wx.png'></image>
    </swiper-item >
  </swiper>
</view>

模板

1). 定义模板：name=‘模板名字’

<template name='listTemplate'>
  <view>
    <text>tempalte content</text>
  </view>
</template>

2). 使用模板

<import src="./detail_template/detail_item_template.wxml" />

3). 使用模板样式

@import '../templates/list-template.wxss';

4.数据存储

1. 存数据：setStorage， 同步： setStorageSync

// 数据存储      
 wx.setStorage({       
    key: 'isCollected',       
    data: oldCollectFlag      
 })

2. 获取数据：getStorage 同步: getStorageSync

let oldCollectFlag = wx.getStorageSync('isCollected');

5.事件委托&事件数据传递

轮播图片点击跳转

事件委托给父元素

<swiper catchtap='imgToDetail' indicator-dots='true' indicator-color='deepPink'>
    <swiper-item>
      <image data-detailId='{{4}}' src='/images/detail/carousel/01.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image data-detailId='{{5}}' src='/images/detail/carousel/02.jpg'></image>
    </swiper-item >
    <swiper-item>
      <image data-detailId='{{6}}' src='/images/detail/carousel/03.jpg'></image>
    </swiper-item >
  </swiper>

传递事件数据

data-’传递数据key’ = value

currentTarget和target的区别

1. target指向的是触发事件的元素
2. currentTarget指向的是捕获事件的元素currentTarget 和target的区别

6.数据交互

发送请求

wx.request({ // 发送请求  
    url: API_URL, // 请求url
    header: { // 设置请求头
    'Content-type': 'json',
    },
    success: (res) => {  // 请求成功的回调函数
    // 隐藏提示加载信息
    wx.hideToast();
    console.log(res);  // 请求的成功的数据对象，注意是封装后的对象
    this.setData({movies: res.data.subjects})
    }
})

7.不同页面之间通信

1.a页面

wx.request({ // 发送请求
    url: API_URL, // 请求的url
    header: { // 设置请求头
    'Content-type': 'json',  },
    success: (res) => {  // 请求成功的回调函数
    // 隐藏提示加载信息    wx.hideToast();
    console.log(res);  // 请求的成功的数据对象，注意是封装后的对象
    this.setData({movies: res.data.subjects})
    }
})

2.b页面

let appData = getApp();
onLoad: function (options) {
    console.log(options.id);
    console.log(appData.appData.movies);
    this.setData({movie: appData.appData.movies[options.id]})
},