微信小程序

PART   1

一个小程序主体部分由三个文件构成:app.js(小程序逻辑,必要)、app.json(小程序公共配置,必要)、app.wxss(小程序公共样式表,不必要)

微信现已开放小程序内搜索,小程序根目录下的sitemap.json文件用来配置小程序及其界面是否允许被微信索引文件内容如下:

eg1:所有页面都会被微信索引(默认情况)

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

eg2:path/to/page页面不被索引,其余页面允许被索引

{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}

eg3:path/to/page页面允许被索引,其余页面不被索引

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page"
  },{
    "action": "disallow",
    "page": "*"
  }]
}

eg4:包含a和b参数的path/to/page页面会被微信优先索引,其他页面都会被索引

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "inclusive"
  }, {
    "action": "allow",
    "page": "*"
  }]
}

一个小程序由四个文件组成:js(页面逻辑,必要)、wxml(页面结构,必要)、json(页面配置,不必要)、wxss(页面样式表,不必要)

小程序中app.json文件用来对小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时、设置多tab等。

{

  "pages": [  //页面中所有文件的目录都要在此声明

    "pages/index/index",

    "pages/logs/index"

  ],

  "window": {  //用于设置小程序的状态栏、导航条、标题、窗口背景色

    "navigationBarTitleText": "Demo"

  },

  "tabBar": {   //小程序的导航栏,该对象中有首页、日志两个导航栏

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页"

    }, {

      "pagePath": "pages/logs/logs",

      "text": "日志"

    }]

  },

  "networkTimeout": {  //小程序中各类网络的超时时间

    "request": 10000,

    "downloadFile": 10000

  },

  "debug": true,  //小程序的调试工具

  "navigateToMiniProgramAppIdList": [   //需要跳转的小程序列表

    "wxe5f52902cf4de896"

  ]

}

PART   2

       每个小程序都需要在app.js中调用APP方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等等。

App({

     onload   //监听页面加载

     onShow   //监听页面显示

     onReady  //监听页面初步渲染完成

     onHide   //监听页面隐藏

}) …

       整个小程序只有一个APP实例,是全部页面共享的,可以通过getApp方法获得全局唯一的APP实例,获取APP上的数据或调用开发者注册在APP上的函数。

       路由方式:

打开新页面:<navigator open-type="navigateTo">< navigator />

页面重定向:<navigator open-type="redirectTo">< navigator />

页面返回:<navigator open-type="navigateBack">< navigator />

Tab切换:<navigator open-type="switchTab">< navigator />

重启动:<navigator open-type="reLaunch">< navigator />

navigateTo, redirectTo 只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。

PART   3

模块化:模块通过module.exports对外暴露接口,在需要使用这些模块化的文件中,使用require将公共代码引入

eg:  //common.js

       function sayHello(name) {

              console.log(`Hello ${name}`)

}

module.exports.sayHello = sayHello

//需要这些模块的文件中,使用require将公共代码引入

var common = require(‘common.js’)

Page({

       helloMINA: function() {

common.sayHello(‘MINA’)

}

})

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

PART   4

小程序中不支持动态执行js代码,即不支持使用eval执行JS代码,不支持使用new Function创建函数

组件生命周期,最重要的生命周期是created、attached、detached

组件实例刚刚被创建好时,created生命周期被触发。此时,组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下,这个生命周期只应该用于给组件this添加一些自定义属性字段

在组件完全初始化完毕、进入页面节点树后,attached生命周期被触发。此时,this.data已经被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个实际进行。

在组件离开页面节点树后,detached生命周期被触发。退出一个页面时,如果组件还在页面节点树种,则detached会被触发。

PART   5

微信小程序中的点击事件

①    bindtap和catchtap

bindtap不会阻止事件的冒泡,但catchtap会阻止事件冒泡

②    事件event(e)

currentTarget:当前组件

target:事件源组件

currentTarget.dataSet:数据

③    输入框绑定输入事件bindinput

<input placeholder = ‘请输入信息’ bindinput = ‘input’/>

取出当前输入框的值

this.setData({ expressNu:event.detail.value })

原文地址:https://www.cnblogs.com/fanfan0916/p/11169690.html