小程序

结构

主体app

• app.json小程序配置
• app.js小程序业务逻辑（属性和方法可以被其他页面访问）
• pages 页面配置（在最前面的默认页面）
• window窗口配置

"navigationBarBackgroundColor": "#f30", //导航栏颜色
"navigationBarTitleText": "WX", //导航栏标题
"navigationBarTextStyle": "white" //导航栏文字颜色（black，white）

• app.wxss公用样式

页面pages

index首页

• index.json首页配置（app.json里面的window一致）
• index.js 首页的业务逻辑
• index.wxml 首页的模板与布局
• index.wxss 首页的css

log 日志

标签组件

view 块
text文本

wxss

语法和web的css基本兼容
rpx 750rpx等于一个屏幕的宽

模板语法

1. 文本{{ }}
2. 条件渲染

<view wx:if="{{表达式}}">
<view wx:else>
<view wx:elif="{{表达式}}">

3. 列表渲染

<view wx:for="{{list}}" wx:for-index="myindex" wx:for-item="myItem">
  {{myindex}}: {{myItem}}
</view>
<view wx:for="{{list}}">{{item}}</view>

4. 模板
   template

定义

<template name="temp">
    <view>标题:{{name}}</view>
</template>

调用

<template is="temp" {{name:"yaya"}}>
                导入模板
<import src="xxx.wxml"/>

非template
任意wxml文件

导入模板
<import src="xxx.wxml"/>
//相当于把xxx.wxm文件内容（除了template）拷贝到include 地方

5. 事件
   类型

bindTap 单击
bindInput 表单发生改变

事件参数

<view bindtap="showMsg" data-msg="你好我是小陈">
                showMsg(e){
    // e.target.dataset.msg 获取的事件参数
  },

表单

<input value="{{msg}}" bindinput="inputHd"></input>
            inputHd(){
    // e.detail.value 表单值
  },

更新数据与视图
this.setData({数据名1: 数据值1,})

导航

标签<navigator>

1. open-type 打开页面类型

navigator  //默认打开
redirect   //不留历史记录
switchTab   //切换底部栏
navigateBack   //返回

2. 打开小程序
   app.json配置

"navigateToMiniProgramAppIdList": ["wxb8f91a4e8d7eb4ae"],
"style": "v2",

navigator

<navigator 
    target="miniProgram" 
    open-type="navigate" 
    app-id="wxb8f91a4e8d7eb4ae" 
    path="要打开的页面（默认首页）"
>面试宝典</navigator>

js方式

wx.navigateTo({url: ' ', })
//跳转页面
wx.redirectTo({ url;" " })
//跳转不留历史记录
wx.switchTab({ url:" "})
//底部栏页面切换
wx.navigateBack( )
//返回
wx.navigateToMiniProgram({ appld:"appld" })
//切换小程序

生命周期

• 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