Fork me on GitHub

微信小程序入门实践

字数统计: 3.7k字   |   阅读时长≈ 15分

https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html

实例源码

可在微信中搜索“小程序示例”

1
2
3
4
5
所有项目源代码、资源文件等内容都将在微信公众号中提供下载地址。读者可以从我的微信公众号中获取项目效果图和最新版本源代码。代码包括Orange Can项目的小程序代码及部分功能的服务端PHP代码。
• 微信公众号：小楼昨夜又秋风
• 知乎专栏：小楼昨夜又秋风
• 知乎ID：七月在夏天
读者可以访问地址：http://pan.baidu.com/s/1cxQXie（注意区分数字和英文字母大小写）获得本书源代码。如果在下载过程中遇到问题，请发电子邮件至booksaga@126.com，邮件主题设置为“微信小程序开发入门与实践配书资源”。

开始

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
1、目录结构
▼ pages
    ▼ index
        - index.js // 页面逻辑
        - index.json // 页面配置
        - index.wxml // 页面结构
        - index.wxss // 页面样式表
    ▼ logs
        - logs.js
        - logs.json
        - logs.wxml
        - logs.wxss
▼ utils
	- util.js

- .eslintrc.js
	Eslint config file
- app.js
	小程序逻辑文件
- app.json
	小程序配置文件
- app.wxss
	公共样式文件
- project.config.json
	项目配置文件
    详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
- project.private.config.json
	项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段
    详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
- sitemap.json 
	关于本文件的更多信息
    请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html


2、创建页面
	app.json文件下pages数组里的页面路径，指向的是一个不存在的文件，那么MINA框架会自动创建这个页面的4个文件

3、自适应单位 （rpx）
	建议以iPhone 6的宽度750个物理像素作为标准，来做设计图。在此宽度下，这张设计图里每个元素的尺寸转换到小程序样式时，转换比例为1物理像素=1rpx=0.5px。rpx和px就是小程序样式里可以使用的两种长度单位。
	
    再次提醒开发者，1物理像素不等于1px。假设有一张图片在操作系统下显示宽度为750个像素，我们现在想让这个图片水平方向充满整个页面。如果你直接在页面里（iPhone 6模拟机型下）将图片宽度设置为750px，这是不对的。正确的设置方法为750rpx或者375px，才能让图片水平填满小程序。因为，iPhone 6下：1物理像素=1rpx=0.5px。

引入WEUI

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
方式一：
	1、在根目录 npm init -y,初始化获得package.json
	2、npm i -S weui-miniprogram --production
	3、上角点击 （工具）-> 构建npm -> 出现 miniprogram_npm并且 weui-miniprogram在里面就可以了
	
	4、引入样式：
		在 app.wxss 中
        @import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'
	5、引入组件
		 在随便一个页面的json中导入 
        "usingComponents": {
            "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
        }
     6、使用
     
      <mp-dialog title="test" show="{{true}}"  buttons="{{[{text: '取消'}, {text: '确认'}]}}">
          <view>test content</view>
      </mp-dialog>

方式二：
通过 useExtendedLib 扩展库的方式引入 WeUI：
    指定需要引用的扩展库。目前支持以下项目：
    kbone: 多端开发框架
    weui: WeUI 组件库
    
    1、app.json 中添加如下配置：
     "useExtendedLib":{
        "weui": true
      },
    2、页面注册组件
    	"usingComponents": {
            "mp-dialog": "weui-miniprogram/dialog/dialog"
          },
              
   3、使用
     
      <mp-dialog title="test" show="{{true}}"  buttons="{{[{text: '取消'}, {text: '确认'}]}}">
          <view>test content</view>
      </mp-dialog>

语法及配置

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
1、小程序标题居中，居左
	究其原因；官方根本没有给出设置标题位置的方法；只是默认在ios 居中 在android 居左 
    
2、事件绑定
	绑定一个点击事件 onTapJump，并将一个event对象作为参数传递到函数里
	<view catchtap="onTapJump" >点击一下 </view>

    • touchstart　手指触摸动作开始。
    • touchmove　手指触摸后移动。
    • touchcancel　手指触摸动作被打断，如来电提醒、弹窗。
    • touchend　手指触摸动作结束。
    • tap　手指触摸后马上离开。
    • longtap　手指触摸后，超过350ms再离开。
    
    // 使用时需加上前缀 catch/bind
    区别在于，对于以上几个冒泡事件，catch将阻止事件继续向父节点传播，而bind不会阻止事件的传播。
    
    // template,block 上面不能绑定事件，编译后会消失
    
3、模板语法，数据绑定
	<view class="data-{{index}}"></view>
	{{变量名}}

4、列表渲染
    使用 wx:for-item 可以指定数组当前元素的变量名，默认 item
    使用 wx:for-index 可以指定数组当前下标的变量名,默认 index
	<view wx:for="{{array}}">
      {{index}}: {{item.message}}
    </view>
5、条件渲染
	// <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
	// 使用 block 符合语义
    <block wx:if="{{length > 5}}"> 1 </block>
    <block wx:elif="{{length > 2}}"> 2 </block>
    <block wx:else> 3 </block>

6、模板
	WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
    // 定义模板,使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段
    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
    // 使用模板,使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
	// 为何使用 ...item, 为了消除template对于外部变量名的依赖。取值时不用加item.
	<template is="msgItem" data="{{...item}}"/>
    
    // 模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。
    
7、模板引用
	WXML 提供两种文件引用方式import和include
    区别：
    	-include 不需要用template标签包裹，但是不能传入数据。只能引用静态模板
        -template 可动态绑定数据
    - import
        // 作用域：B引入A,C引入B,C不能直接使用A
    	<!-- A.wxml -->
        <template name="A">
          <text> A template </text>
        </template>

        <!-- B.wxml -->
        <import src="a.wxml"/>
        <template name="B">
          <text> B template </text>
        </template>

        <!-- C.wxml -->
        <import src="b.wxml"/>
        <template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
        <template is="B"/>
            
    - include
	// include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

8、页面跳转
    • wx.redirectTo
		关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
        
    • wx.navigateTo
		保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
         使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
         
    • wx.switchTap
		跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
        
    • wx.reLaunch
		关闭所有页面，打开到应用内的某个页面
        
    • wx.navigateBack
		关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
        
    // switchTab
    wx.switchTab({
      url: '/pages/skill/skill',
    })
Object参数还可以接收3个方法，分别是：
• success　跳转页面成功时MINA框架将调用此函数。
• fail　跳转页面失败时MINA框架将调用此函数。
• complete　无论成功或者失败，MINA框架都将调用此函数。

9、引入css
	语法：src可以是相对路径也可以是绝对路径
	@import "src"

10、生命周期
小程序app 周期
• onLaunch　监听小程序初始化，当小程序初始化完成时，会触发onLaunch（全局只触发一次）。
• onShow　监听小程序显示，当小程序启动，或从后台进入前台显示，会触发onShow。
• onHide　监听小程序隐藏，当小程序从前台进入后台，会触发onHide。
• onError　错误监听函数，当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息。
    在开发工具中模拟应用程序的“进入后台”和“从后台显示”这两个动作，从而触发onShow和onHide
    
页面周期
• onLoad	监听页面加载
• onReady	监听页面初次渲染完成
• onShow	监听页面显示
• onHide	监听页面隐藏
• onUnload	监听页面卸载


【注意】
    success、fail、complete这3个通用方法
	之前我们反复强调，几乎所有小程序的异步API方法中都包含这3个方法

本地缓存

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
缓存让小程序具备了本地存储数据的能力，它具有以下几个特点：

• 只要用户不主动清除缓存，则缓存一直存在。

• 缓存以key:value键值对的形式存在，很类似于服务器流行的memcache或者redis缓存型数据库。

• 小程序提供了一系列API用来操作缓存，包括：存储、读取、移除、清除全部和获取缓存信息。每种操作同时都具有同步和异步两个方法。具体API请参考官方文档。

• 请注意移除和清除的区别。删除某一个key的缓存，请使用wx.removeStorage方法；而如果想清除所有的缓存请使用wx.clearStorage方法。• 要注意，小程序的缓存永久存在，不存在过期时间这个概念。如果想清除缓存，则需要主动调用清除缓存的API。

• 小程序的本地缓存有容量上限，最大不允许超过10MB。

	同步方法wx.setStorageSync是在异步方法名wx.setStorage后加了一个后缀“Sync”。不仅仅是setStorage，小程序中几乎所有同步方法的方法名都是在异步方法名后增加了“Sync”。

class DBPost {
  constructor(url) {
    this.storeKeyName = 'myCacheList'
  }
  // 获取指定缓存
  getCache(key) {
    let cache = wx.getStorageSync(key)
    if(!cache) {
      this.initCache(key)
      cache = wx.getStorageSync(key)
    }
    return cache
  }
  // 初始化缓存
  initCache(key, data={}) {
    wx.setStorageSync(key, data)
  }
  // 清空所有缓存/指定缓存
  delCache(key) {
    if(key) {
      wx.removeStorageSync(key)
    } else {
      wx.clearStorageSync()
    }
  }
}

关于缓存的处理：

   - 在处理缓存相关问题时，开发者要保持头脑清醒，否则有时候一个小小的缓存没更新的问题，将浪费开发者大量的时间。
    一个典型的案例是，你更改了初始化数据里的文章图片路径，但在真机上运行时，由于缓存存在，就不会重新加载新的初始化数据。这将导致你的新图片一直无法显示。
    -另外一种思路是，在开发阶段，不要做代码清单5-14中是否有缓存的判断，每次应用程序重启都强制更新一次初始化数据，从而保证数据一直是最新状态。

页面参数传递

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
1、路由跳转时携带参数

// 待跳转的页面
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})


// 跳转到的页面
//test.js
Page({
  onLoad: function(option){
    // 此处为跳转时携带的参数
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

2、全局global 对象

// app.js
page({
  globalData: {
    userInfo: null,
    currentSkill: null,// 当前点击技能详情
  }
})
// 页面
const global = getApp()
global.globalData.currentSkill = {...}
                       
3、缓存 storage
-设置缓存
	wx.setStorageSync(key, data)
-读取缓存
    wx.getStorageSync(key)

组件之间参数传递

跟vue组件类似，但传值为单向数据流没有双向绑定的效果

父组件

1
<my-drawer bind:changeDrawer="changeDrawer"  isShow="{{isShow}}"></my-drawer>
1
2
3
4
5
6
7
8
9
10
11
12
methods: {
   openDrawer() {
     this.setData({
       isShow: true
     })
   },
   changeDrawer(e) {
     this.setData({
       isShow: e.detail.isShow
     })
   }
 }

子组件

1
2
3
4
5
6
<van-popup
    show="{{ isShow }}"
    position="left"
    custom-style="width: 80vw;height: 100vh;"
    bind:click-overlay="changeDrawer"
  >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
properties: {
  isShow: {
    type: Boolean,
    value: false,
    observer: function(newVal, oldVal) {
      // 属性值变化时执行
      console.log("observer:", newVal)
    }
  }
},
methods: {
  changeDrawer() {
    this.triggerEvent('changeDrawer', {isShow: false})
  }
}

正常的写法如上，但是我发现如果 子组件中直接 isShow 也讷讷感达到预期效果，还能触发observer。所以说这是否意味着子组件能直接修改父组件的传值呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
properties: {
    isShow: {
      type: Boolean,
      value: false,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
        console.log("observer:", newVal)
      }
    }
  },
methods: {
    changeDrawer(flag) {
      this.setData({
        isShow: !this.data.isShow
      })
    }
},
 data: {
     //isShow: false
 }

后边发现，组件中的 data 与 properties 中的同名称属性是不同的，在页面使用也存在所谓优先级。初始化时 properties中的 isShow 优先级大于 data中的 isShow 。但如果组件中调用 this.setData() 方法修改了 isShow 那么优先使用 本地 data中的isShow ,同理如果父组件中的isShow 发生了改变也会让 properties中的 isShow 优先使用。所以有了数据能双向绑定的错觉

动态值绑定

  1. 动态类名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <view
     class="{{[currentData.id == item.id ? 'active' : '', 'list-item']}}"
    >
    </view>
    <view
     class="{{ !item.path?'is-hidden':''}}
    >
    </view>


  2. 列表动态参数

    1
    2
    3
    4
    5
    6
    7
    <view
        class="{{[currentData.id == item.id ? 'active' : '', 'list-item']}}"
        wx:for="{{list}}"
        wx:key="item"
        bindtap="handleActiveChange"
        data-id="{{item.id}}"
      >

    data-id, 取值从 handleActiveChange 方法, data-xx 方式只能传递基本的 string Boolean

    1
    2
    3
    4
    5
    6
    7
    handleActiveChange(e) {
      let id = e.currentTarget.dataset.id;
      let data = this.data.list.find(item=> item.id == id);
      if(data) {

      }
    },

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。