移动端开发知识梳理

微信小程序

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>

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. o n ( e v e n t N a m e , c a l l b a c k ) 监听全局的自定义事件。事件可以由 u n i . on(eventName,callback)监听全局的自定义事件。事件可以由 uni. on(eventName,callback)监听全局的自定义事件。事件可以由uni.emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

你可能感兴趣的:(移动端,微信小程序,小程序,前端)