weapp

配置项

  "lazyCodeLoading": "requiredComponents", //只注入当前页面需要的自定义组件和当前页面代码
   //注意：添加这项配置后，未使用到的代码文件将不被执行。
  "initialRenderingCache": "static" //静态初始渲染缓存

逻辑层 App Service

js模块化

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//在需要使用这些模块的文件中，使用 require 将公共代码引入
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

behaviors引用组件和Component 构造器

// page-common-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 pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: {
    text: "This is page data."
  },
  methods: {
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

js获取全局变量

// app.js
App({
  globalData: 1
})
// a.js
var localValue = 'a'
// localValue只能在文件a.js中使用。
var app = getApp()
// 获取全局数据并更改它。
app.globalData++

绑定点击事件和set设置数据

 Hello {{name}}! 

事件捕获

Page({
  name: 'Weixin',
  changeName: function(event) {
   console.log(event)
    this.setData({
      name: 'MINA'
    }, function() {
      // 回调 callback 可无
    })
this.setData({
      ['user_info.age']: 20,
      ['cars[0]']: 'tesla'
})
  }
})
event 事件对象
{
  "type":"tap",//事件类型
  "timeStamp":895,//事件生成时的时间戳
  "target": {//触发事件的组件的一些属性值集合
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {//当前组件的一些属性值集合 
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

视图层

列表渲染

    {{item.goods_name}}

条件渲染

 WEBVIEW 
 APP 
 MINA 
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

数据双向绑定

动态改变样式或id

scroll-view 横向滚动需要加 style="white-space: nowrap;"

下载图片到本地然后转发

    wx.downloadFile({
      url: 'https://img.abc.com/shop/1116/1.jpg',
      success (res) {
        if (res.statusCode === 200) {
          wx.showShareImageMenu({path: res.tempFilePath})
        }
      }
    })

组件要使用全局样式需要加

  options: {
    addGlobalClass: true,
    pureDataPattern: /^_/,
    multipleSlots: true
}