结构
主体 app
-
app.json
小程序配置 -
app.js
小程序业务逻辑
(属性和方法可以被其他页面访问)- pages
页面配置
(在最前面的是默认页面) - window
窗口页面配置
"navigationBarBackgroundColor": "#61bfad", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "white" 导航栏颜色, 导航栏标题,导航栏文字颜色(white/black)
- app.wxss
公用样式
- pages
页面 pages
-
index
首页- index.json
首页配置
(app.json里面的window一致) - index.js
首页的业务逻辑 - index.html
首页的模板与布局 - index.wxss
首页的css
- index.json
-
log
日志
标签组件
-
view 块
-
text 文本
wxss
-
语法和web的css基本兼容
-
rpx 750rpx 等于一个屏幕的宽
模板语法
文本
- {{}}
条件渲染
<view wx:if="{{表达式}}">内容</view>
<view wx:elif="{{表达式}}">内容</view>
<view wx:else>请登录</view>
列表渲染
<view wx:for="{{list}}" wx:key="{{index}}">{{index}}-{{item}}</view>
<text wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex"> {{myindex}}.{{myitem}}</text>
模板
-
template
-
定义
<template name="temp>
<view>标题:{{name}}</view>
</template>
- 调用
<template is="temp" {{name:"abc"}}></template>
- 导入模板
<import src="xxx.wxml" />
-
非template
- 任意的wxml文件
- 导入
<include src="xxx.html" />
相当于把xxx.wxml文件内容(除了template)拷贝到include
事件
-
类型
- bindtap 单击
- bindinput 表单发生改变
-
事件参数
<view bindtap="showMsg" data-msg="HI msg"></view>
showMsg(e){
e.target.dataset.msg
//获取事件参数
}
表单
<input value="{{msg}}" bindinput="inputHd"></input>
- inputHd(e){
//表单值
e.detail.value
}
更新数据与视图
- this.setData({数据名:数据值})
导航
标签
<navigator></navigator>
- open-type
打开页面类型
navigate // 默认打开
redirect // 不留历史记录
switchTab // 切换底部栏
navigateBack // 返回
-
打开小程序
-
1.app.json配置
"navigateToMiniProgramAppIdList": ["小程序appid"],
"style": "v2",
- 2.navigator
<navigator
target="miniProgram"
open-type="navigate"
app-id="小程序的appid"
path="要打开的页面(默认首页)">
面试宝典
</navigator>
js方式
- 跳转页面
wx.navigateTo({
url:" ",
})
- 跳转不留历史记录
wx.redirectTo({
url:" ",
})
- 底部栏页面切换
wx.switchTab({
url:"",
})
- 返回
wx.navigateBack( );
- 切换小程序
wx.navigateToMiniProgram({
appid:"appid"
})
生命周期
onLoad
- 页面的参数
- ajax请求通知在这个函数调用
onShow
- 页面显示
onReady
- 页面首次渲染
onHide
switchTab, // 切换底部栏
navigate // 跳转页面
onUnload
- 卸载
redirect时,当前页面就会卸载
onPullDownRefresh
- 下拉刷新
onReachBottom
- 触底
onShareAppMessage
- 用户点击分享
小程序特点
dom限制
- 小程序没有window对象,更没有document,没办法用jq类似的库操作dom
- 小程序不能直接打开网页
- 背景图片最好用网络图片
数量限制
- 1). 底部栏(最少2最多5)
- 2). 页面的历史记录最多可打开5层
- 3). request 同时最多5个请求
大小限制
- 小程序包 最多1M-2M 通过分包16M
- setData 1M
- setStorage 最多10M
- tabbar 底部栏图片,必须是本地的,最大40k,最好81px
网友评论