微信小程序开发记录（二）

基本知识

四种文件类型

1. .json 配置文件
2. .wxml 模板文件
3. .wxss 样式文件
4. .js 脚本逻辑文件

文件夹结构

component 通用组件
pages 页面（一个页面就是一个pages下的子文件夹）
utils 公用（封装接口、常用方法）
wxParse 富文本解析
app.js 注册小程序和生命周期回调
app.json 全局配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
   
   app.wxss 公共样式文件
   project.config.json 工具配置文件，编译配置、界面颜色等
   sitemap.json 配置小程序及其页面是否允许被微信索引
   page.json 单个页面的配置 ，会覆盖app.json里面的相同配置

逻辑层

注册程序

APP() 一个实例，全局共享，全局变量定义
getApp()获取

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

调用
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注册页面

Page() 注册一个页面
getCurrentPages（) 获取当前页面栈

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

behaviors 多个页面有相同的数据字段和方法behaviors

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

component 构造器构造复杂页面（组件），方法写在methods中，可以使用 behaviors 来提取所有页面中公用的代码段。
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。

Component({
  behaviors: [pageCommonBehavior],
  properties: {
    paramA: Number,
    paramB: String,
  },

  methods: {
    onLoad: function() {
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
    }
  }

})

页面切换和模块化

切换

 <navigator url=""></navigator>  
 
 wx.navigateTo({
		url:""
	})

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

模块化

将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块
导出模块：

  module.exports.x=x
  exports.x=x
  module.exports={}

使用：

  let  common=require(模块路径)      暂时不支持绝对路径
  common.x()

视图层

数据绑定

{{}}
与MVVM框架一致，采用双括号语法

<!--wxml-->
<view> {{message}} </view>


// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

双向数据绑定 ： model:属性

列表渲染

wx:for

<view class="li"  wx:for="{{arr}}"  wx:key={{index}}>
{{item}}  {{index}}
</view>

条件渲染

wx:if
wx:elif
wx:else

判断多个组件标签

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

• 频繁切换用hidden，hidden有初始渲染消耗
• 运行时条件不大可能改变用 wx:if， wx:if有更高的切换消耗
• 动态改变的数组要加上wx:key保持自己的状态，不使用的情况下会整个销毁再创建
  wx:key="*this" item本身
  wx:key=“item.property” property不能动态改变

事件绑定

bindtap 类似于v-click ng-click
事件处理函数参数event中会携带type/id/dataset/target等信息

catchtap 阻止事件冒泡

wxss

与css一致，增加：

• rpx
  以 iPhone6 为准（375px)，750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
• 样式导入
  @import “common.wxss”;

wxs

脚本语言，不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/

例：时间戳处理

<!-- xxx.wxml -->
<wxs src="../../utils/filter.wxs" module="filter" />

 <text class="time">{{filter.formatTime(item.create_time,'Y-M-D')}}</text>

//filter.wxs
var formatNumber = function(n){
  n = n.toString()
  return n[1] ? n : '0' + n
}
var formatTime = function (number, format) {
  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];

  var date = getDate(number*1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));

  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));

  returnArr.forEach(function(item,index) {
    format = format.replace(formateArr[index], item);
  })
  return format;
}
var DateDiff=function(time){
  var  start = getDate().getTime();
  var  end = getDate(time*1000);
  var s = start - end;
  s/(24*60*60*1000);// 天
  var days=Math.floor(s/(24*3600*1000)); 
  return days;
}
module.exports = {
  formatTime: formatTime,
  DateDiff:DateDiff
};

基础组件

组件详细介绍

<view></view>   相当于div    hover-class="" 按下去的样式类     hover-stop-propagation、hover-start-time、hover-stay-time

<scroll-view></scroll-view> 可滚动   scroll-x  scroll-y  scroll-top scroll-left scroll-into-view

<swiper></swiper> 滑块

<text></text>  放文字、字体图标     只可以嵌套text、行内元素     属性：space="emsp"   decode="{{true}}"  selectable="{{true}}"

<icon/>图标     属性：type  size color

<progress/>进度条

<button></button>  按钮   disabled loading  size type plain  form-type open-type
button:after{
    border:none;
}

<image></image>  图片  行内块级   属性:mode  bindload   lazy-load


<audio></audio>音频

<video></video>视频

<navigator></navigator>  链接

<map></map>  地图

<canvas></canvas> 画布

更新数据同步view

将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

  this.setData({
       data,callback    //要改变的数据对象（key:value)，回调函数
 });

自定义组件

• 可重复使用的模块、低耦合。
  自定义组件
• 由 json wxml wxss js 4个文件组成。
• 可以嵌套。

在json文件中声明

{
  "component": true
}

在wxml和wxss中进行模板和样式编写；

在js中使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

Component({
  behaviors: [],
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染
  
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

组件通信

父传子
子组件properties 接收

子传父
触发自定义事件 this.triggerEvent(‘事件名’,{参数名:参数值},{})

使用组件
在json中引用声明，标签名、组件定义路径

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

API

事件监听 wx.on…(回调函数)

同步 以Sync结尾 执行结果通过函数返回值获取

异步 如 wx.request，wx.login 等 接受一个object参数
参数名(函数类型)有 :
success(接口调用成功）
fail（接口调用失败）
complete（调用成功失败都会执行）

基础库 2.10.2 版本起，异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。

wx.login({
success(res) {
console.log(res.code)
}
})

部分API
获取用户位置 wx.getLocation({})
微信扫一扫 wx.scanCode({})

页面间传值

1.页面地址携带参数，在wx.onload()的参数options里获取
2.在app.js里定义全局变量，通过获取全局应用实例const app=getApp()获得
3.使用wx.setStorageSync() 缓存数据，在wx.onload()里用wx.getStorageSync()获取 //wx.getStorageSync(key)，获取本地缓存