小程序

结构

主体

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({数据名:数据值})

组件与api

组件

• 容器

  • view

• 内容

  • 子主题 1

• 表单

api

• getStoragesync
• wx.request

导航

标签

<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

自定义组件

定义组件

• .json
  "component":true,

在页面中使用组件

• 1. 页面的json
     "usingComponents":{
     "组件的名称":"组件的地址"
     }
• 2.在页面中使用
  <组件的名称></组件的名称>
  <item></item>

组件的参数传递

• 父传子

  • 1.<item title="xxx"></item>
  • 2. 组件的js
       properties:{
       title:{type:"string",value:""}
       }
  • 3.在组件内部使用
    {{title}}

• 子传父

  • 1. 在组件的js文件
       triggerEvent("事件名",事件参数)
  • 2. 在page页面监听
       <item bind事件="响应函数"></item>
       <item bindclick="clickHd">
  • 3. 在page.js里获取数据
       clickHd(e){
       e.detail 事件参数
       }

组件的css

• 1. 在组件和页面的css默认是隔离
• 2. 隔离方式配置
  • stylesolation:"apply-shared"
    isolated 表示启用样式隔离，
    apply-shared 表示页面 wxss 样式将影响到自定义组件，
    shared 表示页面 wxss 样式将影响到自定义组件
• 3. 自定义class
  • 1. 组件的js定义
       externalClasses:["item-class"]
  • 2. 组件的xwml调用
       <view class="item-class"></view>
  • 3. 页面中填入class
       <item item-class="myitem"></item>
  • 4. 在页面中wxss中书写规则
       .myitem{color:red}

组件的插槽

• 单个插槽

  • 1. 页面中编写插槽
       <item><text>插槽内容</text></item>
  • 2. 组件内部wxml调用
       <view class="item item-class">
       <slot></slot>
       </view>

• 多个插槽
  (命名插槽)

  • 1. 组件内部去定义
       Component({
       options: {
       multipleSlots: true // 在组件定义时的选项中启用多slot支持
       },
       properties: { /* ... / },
       methods: { / ... */ }
       })
  • 2. 页面中编写插槽
       <item><icon type="info" slot="icon"></icon></item>
  • 3. 组件内部调用插槽内容
       <view class="wrapper">
       <slot name="before"></slot>
       <view>这里是组件的内部细节</view>
       <slot name="after"></slot>
       </view>

组件的生命周期

created 被创建

attached 组件实例进入页面节点

ready 组件视图渲染完毕

moved 组件被移动

detached 组件从页面中移除

error 组件被移除

组件内可使用的页面生命周期

pageLifetimes

show

hide

resize(size)

尺寸

分包

why

• 1. 提高小程序的加载速度
     主包做的很大,
     其他的代码,预加载,分包加载的方式
• 2. 让小程序的代码超出2M
     通过把小程序的代码包拆分分多少 每个2M 最多12M(18M)

1.把小程序分为多个包,先下载主包，有空闲再去下载分包

分包原则

• 1. tab对应的页面应该是主包
• 2. 其他页面可以分包

步骤

• 1. 做的时候就要考虑分包，不要做好了再分包
• 1. 文件夹就是分包的名称
• 2. 配置分包
  • "subpackages": [
    {
    "root": "moduleA",
    "pages": [
    "pages/rabbit",
    "pages/squirrel"
    ]
    }
    ]
    }
• 3. 修改路径

预加载

• "preloadRule":{
  "pages/index": {
  "network": "all",
  "packages": ["important"]
  },
  "sub1/index": {
  "packages": ["hello", "sub3"]
  },
  }
  //当进入到首页 去加载yidian这个分包
  //当进入到jok 去加载base这个分包

npm安装插件

1. 右上角 详情>使用npm模板

2. 进入cmd

进入项目文件
npm init初始化项目

3. npm i @vant/weapp -S --production

4. 菜单-->工具-->构建npm

5. 在页面的json配置中引用

"usingComponents":{
"van-button":"@vant/weapp/button"
}

6. 在页面wxml里面使用

<van-button type="primary">按钮</van-button>

小程序的登录流程

a. 小程序端-服务器端-微信服务器端

1. 小程序wx.login 可以获取到一个code 发送给服务器端

2. 服务端通过code+appid+appsecret发给微信服务端 换取sessionkey 和 openid(用户唯一的id)

3. 服务端把openid和sessionkey返回给小程序 存储

4. openid session可以作为我们向服务器发送业务请求的一个凭据

用户头像信息

wx.getSetting(Object object)

获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

wx.getUserInfo(Object object)

获取用户信息

• 用户头像,名称,性别
• 1. 每次获取的时候,需要用户主动授权
     (不希望用一次,授权一次)
• 2. 我们会把用的信息发送给服务器,关联openid存储起来(我们拿到openid就可以从服务器获取-不需要授权)

小程序的上线流程

地图插件的使用

XMind - Trial Version