微信小程序

结构

主体 app

• app.json
  小程序配置

• app.js
  小程序业务逻辑
  (属性和方法可以被其他页面访问)

  • pages
    页面配置
    (在最前面的是默认页面)
  • window
    窗口页面配置

  "navigationBarBackgroundColor": "#61bfad",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "white"
  导航栏颜色, 导航栏标题,导航栏文字颜色(white/black)
  

  • app.wxss
    公用样式

页面 pages

• index
  首页

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

• 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