- ES6转ES5 只转换语法
新的api不支持支持api转换 - 小程序目录结构
官方模板含.wxml.wxss.json.js
app.jsapp.json.app.wxss全局配置同于公共类
wxss渲染遵循就近原则
应用程序人口app. - 1，2，3，4，5最多五级页面
同一级目录下命名必须一致，文件夹名称可不同，如index.wxml,index.wxss.....
<small>根级目录可先建文件夹。
只有text包裹的元素在手机端才可以长按选中
<text> 支持转义符
iphone6 750的宽度 做原型图
文件自动关联--同名
style 动态 class 静态</small>
-
配置app.json
pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
<small>文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。</small>
window
"window":{
"navigationBarBackgroundColor": "#ffffff",//HexColor #000000 导航栏背景颜色，如"#000000"
"navigationBarTextStyle": "black",//String white 导航栏标题颜色，仅支持 black/white
"navigationBarTitleText": "微信接口功能演示",//String 导航栏标题文字内容
"backgroundColor": "#eeeeee", //HexColor #ffffff 窗口的背景色
"backgroundTextStyle": "light", //String dark 下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh":false //Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。
}
}```
- [Swiper组件](https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html)
<swiper>
<swiper-item> </swiper-item>
</swiper>
- App.json里关于导航栏，标题的配置。
app.json除外json的文件，只能配置window，故而直接添加属性即可。
{
"window":{
"navigationBarBackgroundColor": "#b3d4db"
}
}
//无效
{
"navigationBarBackgroundColor": "#b3d4db"
}
//成功
- Page页面与应用程序的生命周期
Page({});
//默认顺序onLoad，onShow，onReady
- **数据绑定（核心知识）**
单向数据绑定，js->wxml
`this.setData()`
`可通过setData({a:a});传参，this.data.a`
wx:if//显示，隐藏
wx:if="{{string}}";
wx:if="string";
wx:if="false";
wx:if="{{true}}"//显示 字符串自动隐式转化为true;
wx:if="{{false}}";//隐藏
小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A
而这个动作A的执行，是在onLoad事件执行之后发生
- 数据绑定的运算与逻辑
- AppData区域介绍
- **事件与事件对象**
- 事件绑定的写法同组件的属性，以 key、value 的形式。
- <small>key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart</small>
- <small>value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。</small>
<view bindtap="onTap"></view>//绑定事件
<view catchtap="onTap"></view>//阻止事件冒泡
<block wx:for="{{postKey}}" wx:for-item="item">
<view catchtap="onTap" data-post-Id="{{posts.item}}">
<template is="Tplname" data="{{...item}}"/>
</view>
</block>//使用模板时得在tpl外（for内）包裹一层，添加事件。
onTap:function(event){
event.currentTarget.dataset.dataid//可获取自定义属性。
//自定义属性以data-为前缀。跟就'-'来区分。会自动转换驼峰命名。
//data-postId =>postid;data-post-id=>postId;data-post-Id=>postId
//保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx:navigateTo({
url: 'String',//跳转路径同app.json page配置。无需后缀名。可带参数。
//"url?id="+parameter onLoad:fuction(option){ option.id }接收参数。
success: function(res){
//success 成功后执行
},
fail: function(res) {
// fail 失败后执行
},
complete: function(res) {
// complete 无论失败或超过都执行
}
})
//关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({})
}
- **[缓存](https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxremovestoragesynckey)**
- 无失效期。
- 缓存上限最大不能超过10MB
- 5类操作10种方法
wx.setStorage(OBJECT);
wx.setStorageSync(KEY,DATA);
wx.getStorage(OBJECT);
wx.getStorageSync(KEY);
wx.getStorageInfo(OBJECT);
wx.getStorageInfoSync
wx.removeStorage(OBJECT);
wx.removeStorageSync(KEY);
wx.clearStorage();
wx.clearStorageSync()
- **列表渲染**（核心知识）
- wx:for
wx:for="{{array}}";
wx:for-item//可以指定数组当前元素的变量名
wx:for-index//可以指定数组当前下标的变量名
`wx:for` 用在 `<block/>`标签上，以渲染一个包含多节点的结构块。
`wx:for`可以嵌套
外部定义`pasts-data.js`
使用`module.exports={ posts_list:local_database}`导出函数，对象或原语。
`post.js`使用`var postsData = require("../../data/posts-data.js")`接收数据。
`postsData.posts_list`输出数据
**绝对路径无效 **
- Template模板的使用（核心知识）
- 模板不是模块 js文件无效。
- 命名以Tpl或其他标识符结尾。如posts-itme-Tpl。
<template name="Tplname">//tpl不能添加事件。
//content
</template>
//图片等文件的引入使用绝对路径
//wxml引入
<import src="绝对路径或相对路径" /> //注意闭合标签
//wxml引用
<template is="Tplname" data="{{item}}"/>
//data="{{...item}}" ...展开itme中的键值对，则tpl中无需item作为前缀。
//wxss 引用
@import "绝对路径或相对路径";
- 音乐播放基本实现
- 利用app.js中的全局变量来判断是否播放。
wx.playBackgroundAudio(OBJECT) //dataUrl title coverImgUrl 链接必须为网络链接
wx.pauseBackgroundAudio();//暂停播放
wx.onBackgroundAudioPlay(CALLBACK)//监听音乐播放。
wx.onBackgroundAudioPause(CALLBACK)//监听音乐暂停。
网友评论