主体结构 --- (共用配置，优先级别最低)
app.js
app.json
app.wxss
页面结构
index.wxml
index.wxss
index.js
index.json
测试时候安全域名，除了可以在开发者后台配置域名信息外，还可以在调试工具中，勾选取消安全验证
image标签 不支持 外部链接，只接受 授权安全域名下的 SRC 引入，另外域名需要拼接完全（相对地址的使用慎重一些）
在CSS中使用图片，只能使用BASE64格式
小程序结构中，app.json配置
全局配置
{
Page({
}),
//配置
window({
页面颜色等
下拉刷新
}),
//分页按钮
tabBar({
'color':'xxx',
'selectedColor':'xxx',
'lists':[ //最少2个，最多5个,与上面page中顺序需要匹配
{
'text':'xx',
'pagePath':'xxxx',
'iconPath':'', //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
'selectedIconPath':'' //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
},{
'text':'xx',
'pagePath':'xxxx',
'iconPath':'', //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
'selectedIconPath':'' //icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
},
]
}),
debug({
})
}
页面配置
在每个页面js文件中，
小程序 js初始化 app.js
1.注册app
App({
//全局变量
gldData : {
a : 1
}
})
在page中js调用
//通过getApp获取全局函数实例
const app = getApp();
console.log(app.gldData) //取到全局变量
pageData : { //页面中的全局数据
b : 2
}
生命周期
app
onLaunch
onShow
onHide
page
onLoad //只会执行1次
onReady //只会执行1次
onShow
onHide
onUnload //只会执行1次
数据绑定，内容 遍历，提交渲染
事件
bind:tap="xxx" bind会引起事件冒泡
catch:tap='xxx' catch不会引起事件冒泡
布局:
尺寸：一个屏幕的宽度为750rpx 把PSD设置图PX尺寸按照屏幕比例,将所有样式中的尺寸转化为rpx
在CSS中引入共用样式 在目标page的CSS中 @import 'xxx/xxx/xxx.wxss';
wxs
wxs --- wx script
//模块化引入
<wxs module='tools'>
function createName(data){
return data.split('');
}
module.exports = createName;
</wxs>
<view wx:for="tools(names)">
{{item}}
</view>
names为js中data中的用户自定义的数据
data数据更新
修改data数据中已有的数据，且必须通过方法 setData方法来实现
setData会将所有数据更新后，再出发页面渲染更新，而不是每个数据变化都渲染页面（主要为了提高性能）
//设置数据
this.setData({
xxx : xxxx
})
//获取数据 (es6 数据解构)
let { xxx } = this.data; // xxx为data中已有的key值
let xxx = this.data.xxx // 相当于
自定义组件
引入组件 (组件页面，引入组件的页面 或者说 子级与父级的关系更恰当些)
usingComponent
组件页面
json文件 { 'component':true }
js文件
Component({
data : {
},
attached : {
},
method{
}
})
引入组件的页面
json文件 { 'usingComponents':{
'mycomponent' ：对应路径
}}
//组件js中，初始化立即会执行该函数，强制同步数据使用
attached(){
this.triggerEvent('myfn',123);
}
【组件数据返回到引入的页面中去】 method中 this.triggerEvent('myfn',123); 触发自动定义事件myfn 带上数据123 过去
<mycomponent now-in="哈哈哈" bind:myfn='myPageGetData'></mycomponent> 页面中的标签
myPageGetData(ev){ 页面的js
console.log(ev);
this.setData({
xxx : ev.detail; xxx为页面js中data中的数据的key值
})
}
【引入页面中模板标签添加数据，到组件页面中】
在组件标签上添加自定义属性 now-in,
在自定义组件的js文件中，对属性properties的数据进行设置
properties:{
nowIn : String //标签中为小写的串式命名，在属性中为驼峰式命名
}
在组件ml页面中，可以直接使用 {{nowIn}}
网友评论