微信小程序之旅

一 、小程序简介

​ 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

    设备	rpx换算px（屏幕宽度/750）	px换算rpx（750/屏幕宽度）
    IPhone5	1rpx = 0.42px	1px = 2.34rpx
    IPhone6	1rpx = 0.5px	1px = 2rpx
    IPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

• 必备知识

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

五、Vxml语法

1.数据绑定

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

​ 初始化数据

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

Page({
  data: {
    motto: '你好，欢迎来到音乐世界',
    userInfo: {},
    hasUserInfo: false,
  },
1
2
3
4
5
6

​ 使用数据

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

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

<view>{{message}}view>
1

​ 修改数据

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

生命周期钩子函数

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

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

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

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {  
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

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>
    1
    2
    3

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

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

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
2
3
4
5
6
7
8
9
10
11
12
13

模板

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

<template name='listTemplate'>
  <view>
    <text>tempalte contenttext>
  view>
template>
1
2
3
4
5

​ 2). 使用模板

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

​ 3). 使用模板样式

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

4.数据存储

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

 // 数据存储      
 wx.setStorage({       
 		key: 'isCollected',       
 		data: oldCollectFlag      
 }) 
1
2
3
4
5

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

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

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>
1
2
3
4
5
6
7
8
9
10
11

传递事件数据

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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})
    }
})
1
2
3
4
5
6
7
8
9
10

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]})
},
1
2
3
4
5
6