初识微信小程序_22.video cover

2.初识微信小程序

官网：https://mp.weixin.qq.com/cgi-bin/wx
我的APP ID: 网站注册后可以知道

微信小程序：

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信公众号和小程序的主要区别？
1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）
2、实现技术区别 （公众号基于H5（html5 vue angualr react ionic），小程序必须用小程序的语法开发）
3、用户体验 （小程序的用户体验要比 html5好一些，更接近原生app）
4、调用原生的能力 （微信公众号可以借助jssdk调用手机的摄像头拍照 ，调用扫描二维码等 能力有限。 小程序调用原生的能力非常强大，能实现几乎app能实现的所有功能） （调用原生的功能 *可以不开发app ）
5、微信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?t=1477656485442

3.创建小程序 注册小程序账户 小程序工具功能介绍 以及小程序的目录结构分析

目录结构：

• pages-所有页面
  首页index 业务逻辑.js wxml–html wxss-css
  登录脚本 多了一个配置文件json

• utils
  工具js 模块化的东西

• App.js
  全局的js文件 其他地方调用App 只需要用 const app=getApp(); 获取应用实例

• App.json
  全局的配置文件 整个页面 导航条的颜色 底部菜单切换

• app.wxss
  全局css文件

• project
  项目配置文件 一般不改动

视图——wxml wxss
业务逻辑——js

4.小程序MINA框架介绍 wxml wxss pages逻辑层js 介绍 绑定数据、绑定属性、条件判断、循环渲染数据

MINA框架介绍

• MINA(MINA IS NOT APP) 是在微信中开发小程序的框架。
• MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
• MINA提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。
• MINA的核心是一个响应的数据绑定系统。
• 整个系统分为两块视图层(View)和逻辑层(App Service)
• MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新
• MINA是腾讯给微信小程序命名的框架，其实他实际上应用的是目前IT界最被推崇的MVVM模式。

微信小程序与H5的不同之处：

view=div
text=span
没有ul li

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  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
57
58
59
60
61
62
63
64
65

数据绑定与Vue差不多
有判断条件

<view class='box' wx:if='{
  {flag}}'>
绑定属性
 <view data-aid="{
  {aid}}">放上去看一下</view>
循环数据——简单数组
<view class='list'>
  <view class='item' wx:for="{
  {list}}">
      {
  {index}}-----{
  {item}}
  </view>
</view>
循环数据——数组里面有对象
<view class='list'>
  <view class='item' wx:for="{
  {list1}}">
      {
  {index}}-----{
  {item.title}}
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

嵌套循环
使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<view class='list'>
  <view class='item' wx:for="{
  {list2}}">
      {
  {item.cate}}

      <view wx:for="{
  {item.list}}">
      -------{
  {item.title}}
      </view>
  </view>
</view>

<view class='list'>
  <view class='item' wx:for="{
  {list2}}" wx:for-item=“item”>
      {
  {item.cate}}

      <view wx:for="{
  {item.list}}" wx:for-item=“car”>
      -------{
  {car.title}}
      </view>
  </view>
</view>
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

5.微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件

不可以使用alert方法
自定义方法与data同级

没有br换行
<view class='br'> </view>

执行方法的几种写法：
1.在生命周期函数里面调用方法
this.run（）

2.<button size="mini" bindtap='run'>执行run方法</button>
注意触发方法不需要写（）

3.获取data的数据
console.log(this.data.msg);

4.改变data的数据

his.setData({
      msg:'我是改变后的msg'
    })
1
2
3

MVVM:是Model-View-ViewModel的简写,将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

事件对象:原生js相似 鼠标按下的当前DOM节点和一切的相关信息
获取自定义属性的值

 doEventFn(e){
    console.log(e);
    console.log(e.currentTarget.dataset.aid);
  }
1
2
3
4

小程序里面执行方法传值——在view视图层执行方法传值
不能直接传值 需要靠event 事件对象

requestViewData(event){
    console.log(event.currentTarget.dataset);
  }
<button size="mini" data-aid='234' data-cid='234xsxs' bindtap='requestViewData'>执行方法传值</button>
1
2
3
4

冒泡与非冒泡事件

事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 bindtap
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 catchtap

6.微信小程序app.json配置视图样式、配置底部tab切换、页面跳转配置页面里面的.json文件

app.json的配置和使用：
1.pages配置路由、windows显示效果、底部tab切换
导航条只支持黑色和白色
1、小程序里面的资源不能大于2M

2、底部tab切换菜单最少2个最多5个

 "tabBar": {
    "color":"#666",
    "selectedColor":"#f60",
    "backgroundColor":"#eee",
    "borderStyle":"white",
    "position":"bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"static/images/home1.png",
        "selectedIconPath":"static/images/home.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
        "iconPath":"static/images/news1.png",
        "selectedIconPath":"static/images/news.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath": "static/images/user1.png",
        "selectedIconPath": "static/images/user.png"
      }
    ]
  }
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

页面跳转：

从一个页面跳转到另一个页面

  goShop(){
    wx.navigateTo({
      url: '../shop/shop'
    })
  }
1
2
3
4
5

7.微信小程序小小练习 小程序页面跳转传值、请求Api接口获取服务器数据【无人点餐系统菜品页面制作】

页面跳转传值：

<button size="mini" data-aid="22" bindtap='goFoodContent'>跳转到详情页面传值2</button>

goFoodContent(event){
    console.log(event.currentTarget.dataset.aid);
    var aid = event.currentTarget.dataset.aid;
    wx.navigateTo({
      url: '../foodcontent/foodcontent?aid='+aid
    })
  }
1
2
3
4
5
6
7
8
9

跳转到的页面来监听上个页面传过来的值

	onLoad: function (options) {
    //获取上一个页面的传值
    console.log(options);
  }
1
2
3
4

请求数据：
wx.request