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