微信小程序开发

最最重要的还是得从阅读开发文档入手

1. 目录结构

  • 微信小程序文件结构
wxml[结构] + wxss[样式] + js[逻辑] + json[配置]
2. 全局配置
  • 全局配置 -- 根目录下的app.json
    • 对微信小程序做全局配置
    • 决定页面文件的路径、窗口表现、设置网络超时等
  • 页面配置
    • 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
    • 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
3. 小程序框架
  • 001 在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面
  • 002 注册小程序
    • 在 app.js 中调用 App()注册小程序实例
    • 绑定生命周期回调函数、错误监听和页面不存在监听函数等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// app.js
App({
    onLaunch (options) {
      // Do something initial when launch.
  },
  onShow (options) {
      // Do something when show.
  },
  onHide () {
      // Do something when hide.
  },
  onError (msg) {
      console.log(msg)
  },
  globalData: 'I am global data',
// globalData: {
//     data1: 'data1Value'
// }
})
    • 整个小程序只有一个 App 实例，是全部页面共享的。
    • 开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
1
2
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
  • 003 注册页面
    • 小程序页面在对应的 js 文件中使用Page()进行注册
    • 指定页面的初始数据、生命周期回调、事件处理函数等
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
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})
  • 004 使用Component构造器构造页面
    • Component 构造器的主要区别是：方法需要放在 methods: { } 里面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})
    • 可以使用 behaviors 来提取所有页面中公用的代码段
1
2
3
4
5
6
7
8
9
10
11
// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    // 页面创建时执行
    console.info('Page loaded!')
  },
  detached: function() {
    // 页面销毁时执行
    console.info('Page unloaded!')
  }
})

 

1
2
3
4
5
6
7
// 页面 A
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

　　

1
2
3
4
5
6
7
// 页面 B
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})
  • 005 自定义组件
    • 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成
    • 0051 首先需要在 json文件中进行自定义组件声明
      • （将 component 字段设为 true 可将这一组文件设为自定义组件）
1
2
3
4
// .json
{
  "component": true
}
    • 0052在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
/*
 * 这里的样式只应用于这个自定义组件
 * 注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
 */
.inner {
  color: red;
}
    • 0053 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
      • （组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// .js
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})
    • 0054 使用自定义组件
      • 00541 在页面的 json 文件中进行引用声明
1
2
3
4
5
{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}
      • 00542 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件
        • 节点名即自定义组件的标签名，节点属性即传递给组件的属性值
1
2
3
4
5
<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text">
</component-tag-name>
</view>
    • 注意
      • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
      • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
      • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
  • 4 页面路由 ---  在小程序中所有页面的路由全部由框架进行管理， 框架以栈的形式维护了当前的所有页面
    • 注意点
      • navigateTo, redirectTo 只能打开非 tabBar 页面。
      • switchTab 只能打开 tabBar 页面。
      • reLaunch 可以打开任意页面。
      • 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
      • 调用页面路由带的参数可以在目标页面的onLoad中获取
  • 5 模块化
    • 001将公共代码抽离到js文件，通过module.exports暴露接口
1
2
3
4
5
6
7
8
9
10
11
12
// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
  
module.exports= {
sayHello: sayHello
sayGoodbye: sayGoodbye
}
    • 002 在需要使用这些模块的文件中，使用 require 将公共代码引入
1
2
3
4
5
6
7
8
9
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})
  • tip
  1. 绑定事件
    • bindtap
    • catchtap -- 不冒泡
    • 如果一个view有多个bindtap，只走最后一个
    • 如果一个view同时有bindtap和catchtap，只走catchtap
  2. 全局方法 --> 写在utils>request.js
    • 在根目录下的app.js 的func对象中声明
    • 在页面中，通过getApp().func.xxx 调用
  3. 双向绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view class="list">
<text class="list_left">身份证号：</text>
    <input name="cardId" class="list_right" value="{{infodata.idCard}}" data-type="idCard" bindinput="inputChange"/>
</view>
inputChange(e){
    var content = e.detail.value
    var type = e.currentTarget.dataset.type
    switch (type) {
      case "idCard":
        this.setData({
          ["infodata.idCard"]: content
        })
        break;
      case "userName":
        this.setData({
          ["infodata.username"]: content
        })
        break;
    }
}

　　

posted @ 2020-07-22 10:51  Christianೄ೨  阅读(173)  评论(0)    收藏  举报