移动端开发知识梳理

微信小程序

01-准备

首先要成为小程序开发者，在微信公众平台中的小程序入口注册，完善小程序信息。安装开发者工具后就可以创建小程序项目了。

02-小程序代码结构和基本配置

pages

pages文件夹内存放小程序各个页面，每个界面由以下四个文件组成：

• .wxml 类似html
• .wxss 类似css
• .js 页面脚本代码
• .json 页面配置文件，设置与页面顶部显示内容相关的信息

utils

存放项目中常用的依赖，js模块通过 export default 对外暴露接口，其它使用的地方通过 import 引用

app.js

每个小程序都要在app.js中调用App方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

页面的.js文 件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法。

app.js可以理解为多页面数据共享工具。

app.json

当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab等…

app.wxss

全局样式。定义在这里面的样式，作用于每个页面，定义在page的.wxss只作用于对应的页面，且会覆盖app.wxss中相同的选择器。

03-基础使用

数据绑定

小程序中视图和数据绑定 对象数据变化直接影响视图，视图变化必须同过事件驱动才能改变对象数据。

使用setData改变数据

注意！

• data应只包括渲染相关的数据
• 控制setData的频率
• 选择合适的 setData 范围
• setData 应只传发生变化的数据
• 后台的setData尽量避免（会抢占前台页面的运行资源）

列表渲染

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

条件渲染

<view wx:if="{{module == 'A'}}"> A </view>
<view wx:elif="{{module == 'B'}}"> B </view>
<view wx:else> C </view>

样式导入

@import "xxx.wxss";

小程序事件

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap *	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

小程序传参

小程序在组件上绑定事件后，传递参数时，采用事件对象的自定义属性的方式。

​ 业务需求？

​ 点击一个内容跳转到一个新的页面，并且新页面的内容是由点击的内容决定的。比如用户在美团上浏览商品，通常情况下我们去查看详情页面，会发现它的结构都是相同或者类似的，但是内容是由用户点击的内容决定的。

​ 分析

​ 1、如何跳转？

​ 给商品列表中的每一项绑定一个事件，在事件中使用wx.navigateTo({ url: url }) 跳转到新页面。

​ 2、页面中得到参数怎么传递给js？

​ 微信小程序提供自定义属性，data-* 若组件上触发事件，会发送给事件处理函数。

​ 即，data-* 自定义的内容可以在事件执行的时候获取出来，用一个变量接收，并与需要跳转的地址进行拼接，实现明文传参。

​ 3、当前js的参数怎么传递给另一个页面的js？

​ 当前js使用wx.navigateTo({ url: url?Key=value})明文传参，下个页面在页面一加载时就执行onload：function（options）{}函数，此函数中的参数options就是用来接收所有信息的，它里面包含了传递过来的参数。

04-微信小程序自定义组件

创建自定义组件

​ 在components文件夹中再新建一个自定义组件的文件夹，文件夹名即为该自定义组件的组件名。

​ 在新建好的组件包上右键，选择新建component，然后再次输入组件名，输入后，系统会自动生成json wxml wxss js 4个文件，到此即为新建自定义组件成功。

使用自定义组件

​ 在使用已注册的自定义组件前，首先要在页面的json文件中进行引用声明。提供每个自定义组件的标签名和对应的自定义组件文件路径。

{
  "usingComponents":{
    "counter":"../../components/counter/counter"
  }
}

05-生命周期

应用的生命周期

// app.js 小程序的生命周期函数在app.js中声明
App({
  onLaunch:function(){
    // 小程序初始化（全局只触发一次）
    // 在这里面添加初始操作，如获取用户信息、申请权限、获取服务器数据
  },
  onShow:function(){
		// 小程序显示
  },
  onHide:function(){
    // 小程序隐藏
  },
  onError:function(msg){
    // 小程序错误
  }
})

页面的生命周期

• onLoad页面加载时触发，且只发生一次，可以理解为vue中的created。 一般用于获取上个页面传递的参数或数据的初始化操作
• 页面载入后触发onShow方法，显示页面，可以理解为mounted。一般用于插件的初始化操作
• 离开本页面时，触发onHide方法。
• 当页面从页面栈中被销毁时，触发onUnload方法

06-页面路由

页面栈以栈的形式维护页面与页面之间的关系。（向箱子里放书，先进后出）小程序页面栈最多10层

API进行页面跳转

wx.switchTab

跳转到tabBar页面，并关闭所有页面，页面栈仅剩当前页，跳转时不能页面传参。

wx.reLaunch

关闭所有页面，打开到应用内的某个页面，页面栈内仅剩当前页面。
使用 wx. reLaunch({ url: ‘pageH’ }) 会重启小程序

wx.redirecTo

关闭当前页面，跳转到应用内某个页面，页面栈数量不增不减。

wx.navigateTo

保留当前页面，跳转到应用内的某个页面，页面栈数量+1

wx.navigateBack

关闭当前页面，返回上一页面或多级页面，页面栈数量-n

也可使用组件方式跳转

<navigator url="pages/logs/index" open-type="navigate">跳转</navigator>
<!-- 
  url 要跳转的页面路径
  open-type 跳转方式 对应上面的跳转方法
  navigate、redirect、switchTab、reLaunch、navigateBack
  delta 当 open-type 为 'navigateBack' 时有效，表示回退的层数,默认为 1
-->

07-网络请求

使用wx.request

封装request！！！

import baseUrl from "./baseUrl" // 自己在外面定义好baseUrl，在这引入

var request = function(config){
  return new Promise((resolve,rejected)=>{
    wx.request({
      url:baseUrl + config.url,
      method:config.method ? config.method : "get",
      data:config.data,
      header:{
        "content-type":"application/x-www-form-urlencoded"
      },
      timeout:5000,
      success(res){
        resolve(res)
      },
      fail(err){
        rejected(err)
      }
    })
  })
}

export default request

08-页面通讯

全局变量

app.globalData

// 在app.js中设置对象 globalData{}
// 在要传值的页面引入 var app = getApp();
app.globalData.name = "王安石";
// 在要接受值的页面引入  var app = getApp();
console.log(app.globalData.name);

本地缓存

// 在要传值的页面
wx.setStorageSync("name","陆游");
// 在要接受值的页面
wx.getStorageSync("name");

路由

// 在要跳转的路由后面加上 ?key=value&key1=value1 的形式;注意: wx.switchTab 中的 url 不能传参数。
wx.navigateTo({
  url:'../pagex/pagex?name="xxx"'
})
// B页面-接收数据 通过onLoad的option...
Page({
  onLoad:function(option){
    console.log(option.name)
  }
})

uniapp

01-创建项目

使用HbuilderX创建项目，新建项目。

也可以使用cli脚手架创建uni-app项目。

02-全局css变量

uni-app 提供内置 CSS 变量

CSS变量	描述	App	小程序	H5
–status-bar-height	系统状态栏高度	系统状态栏高度	25px	0
–window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
–window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度

03-路由

需要在pages.json中配置每个路由页面的路径及页面样式。

pages节点接收一个数组，数组每个项都是一个对象：

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现

• pages节点第一项为应用入口页，首页。
• 应用中新增/减少页面都要对pages数组进行修改。
• 文件名不需要写后缀。

04-uni页面通讯

• 路由传参
• globalData全局变量
• 本地缓存
  • uni.setStorageSync(key,data) 同步存储
  • uni.getStorageSync(key) 同步取
  • uni.removeStorageSync(key) 同步移除指定key
  • uni.clearStorageSync() 同步清理本地缓存
  • 不加Sync就是异步
• vuex
• uni自带api方式
  • uni.$emit(eventName,Object)触发全局的自定义事件。附加参数都会传给监听器回调。
  • uni.$on(eventName,callback)监听全局的自定义事件。事件可以由uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。