Uniapp周边

冷兔ex发布
145 阅读7分钟

前端三板斧

前端的主要技术核心：虚拟机 + 渲染引擎

前端主要工作功能实现
数据获取应用层调用网络操作请求数据
状态管理各种框架 + runtime宿主环境虚拟机
页面渲染把相关图元信息通过图形API发给GPU渲染

Web前端发展历程

时间获取数据状态管理页面渲染
1995HTTP/1.0第一版JS裸露的HTML标签
2005HTTP/1.1 和 AJAXJS表单+特效CSS 美化页面
2010HTTP/1.1 和 AJAXjQuery操作DOM处理前端逻辑CSS 美化页面
2015
HTML5标准推广
浏览器性能提升		HTTPS
HTTP/2
WebSocket		Angular
React 状态驱动视图理念
Vue		CSS3
Canvas
音、视频

前端常用

标题说明备注
HTML定义网页结构和内容
最大特点：支持超链接		标签及属性
元素分类：块级、行内、行内块
CSS定义网页样式语法：选择器{ 属性名: 属性值;}
文档流与脱离
布局（平面分布）flex、grid
定位（垂直于平面）position
动画
URL互联网地址 表示各种资源HTTP协议：用于客户端和服务器之间通信 规定其格式
域名
端口
JavaScript定义网页与用户交互ES
变量 let和const 变量声明、表达式、运算符、数据类型
数组的操作
DOM（浏览器提供操作网页结构的API）
BOM（浏览器提供和网页结构无关的API）
Node.js一个多技术组合的平台
让JS能调用系统接口，开发后端应用		Node.js不是后端框架和编程语言
是JS运行环境，让其运行在服务端的开发平台
分为 http模块、fs模块、steam模块
前后分离AJAX 浏览器上的功能
Promise
跨域		AJAX 无刷新网页获取数据 AJAX库有jQuery和axios
实现跨域的方法：
JSONP（兼容IE）
CORS（提前声明共享数据）
Proxy代理：允许客户端通过网络代理与服务器进行非直接的连接,需在vue.config.js文件中配置changeOrigin: true

前后端交互：登录状态保持
注册时，用户名和密码被b站保存到数据库，下次登录时核验，Cookie是实现每次HTTP请求都自动带数据给服务器的技术，第一次请求时服务器设置，然后保存在浏览器，以后每次都带上cookie
数据都保存在环境内存中，刷新或重启后，一切数据会回到刚打开的状态。所以用浏览器的localStorage函数来保存和查询数据。本地存储 localStorage，替换为fetch网络通信函数
MVC设计模式代码模块化分成3个对象Model操作所有数据，View所有UI界面，Controller负责其他
MVVM = MVC + 双向绑定 即把一堆杂乱数据，和一堆DOM结构，通过Vue实例连接起来
Webpack前端工程化解决方案
Vue构建用户界面的JS框架，将数据转换为界面核心思想是：
一、声明式编码：数据驱动视图，不操作DOM
二、组件化
组件通信：父组件引入子组件，绑定数据；子组件用props接收

Vue模板(V)承接界面：
插值语法(解析标签体)：可读取data中所有属性
指令语法(解析标签/绑定事件)：
数据绑定v-bind和v-model
条件渲染v-if和v-show
列表渲染v-for
添加事件v-on

Vue实例对象(VM)：
vm对象封装了对视图层的所有操作，包括数据读写、事件绑定、DOM更新
el关联实例与容器、data(M)、methods、computed、watched、props、生命周期钩子：Vue 在关键时刻帮我们调用的一些特殊名称的函数

Vue router
Vuex全局状态管理 核心是store，由state/getter、mutation/action组成

Vue3 组合式API（适用大型项目） 在 setup 函数中使用，setup是启动页面后自动执行的函数，但在其中定义的变量和方法，要return才能使用，通过setup的返回值来替代data选项，其中参数为setup(props, context){}

image.png

跨平台解决方案

标题内容
UniApp基于 Vue 语法 + 微信小程序 API
集成 Weex 的SDK 实现App端原生渲染能力
FlutterGoogle 2017发布 Dart语言
React NativeFacebook 2015发布 JS语言

H5

广义H5 指HTML5，第五代超文本标记语言，用于写网页代码。还有基于H5和响应式设计的前端框架：Bootstrap；

狭义H5，互动形式的多媒体广告页面，也就是用于营销传播的手机页面。

Uni-app 常用资源

HBuilderx官网

微信开发者工具

Uniapp官网文档

Uni-ui组件库

颜色大全网站

常见报错和坑

  • 无法在 HBuilderx中启动小程序

在微信开发者工具中设置打开安全端口

  • 启动 Uniapp 小程序出现错误

在uniapp 中manifest.json找到微信小程序配置，填写 wxid 即可，测试号：wx181cc686ca3cdee7

  • uni.request时需加上 header 字段，否则登陆页面可能不跳转：
uni.request({
  url: baseUrl + 'login/login', 
  method: "POST",
  data: this.form,
  header: {
    'content-type': 'application/x-www-form-urlencoded',
  },
  ...

Uni-app 基础

基础标签

// 需有至少一个根组件`<View>`标签
<View>
  <View>相当于html中的div</View>
  <text>相当于html中的span</text>
</View>

媒体组件

// aspectFit 完整比例显示
<image src="" mode="aspectFit">

样式

rpx 即响应式 px，根据平面宽度自适应的动态单位。

不可使用*全局样式选择器。

生命周期

Uni-app支持 Vue 实例生命周期、应用生命周期、页面生命周期

生命周期说明
onLanuch
应用生命周期		uni-app初始化完成时触发(仅一次)
onShow应用显示了
onHide应用隐藏了
onload
页面生命周期		页面加载了
onPullDownRefresh监听用户下拉动作，用于下拉刷新
onReachButtom页面触底了

网络请求

接口API校验工具

Vue 用axios发起网络请求

uniapp 用uni.request发起网络请求：

<template>
  <view>
    <view v-for="item in picurl" :key="item.id">
      <image :src="item.url" @click="getPicUrl" mode="aspectFill"></image>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
	picurl: []
      }
    },
    methods: {
      getPicUrl() {
	uni.showLoading({
	  title: "数据疯狂加载中..."
	})
	uni.request({
	  url: 'https://jsonplaceholder.typicode.com/posts/1',
	  success: res => {
	    console.log(res)
	  },
	  method: "get",
	  fail: err => {
	    console.log(err)
          },
	  complete: () => {
	    uni.hideLoading()
	  }
	})
      }
    },
    onLoad() {
      this.getPicUrl()
    },
  }
</script>

数据缓存

// uni.setStorage 异步接口 将数据存储在本地缓存中指定的key中，覆盖原key对应内容
// uni.setStorageSync 同步接口 将数据存储在本地缓存中指定的key中，覆盖原key对应内容
<template>
  <view>
      <button type="primary" @click="setStor">存储数据</button>
      <button type="primary" @click="getStorage">获取数据</button>      
  </view>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      setStor() {
	uni.setStorage({
	  key:'id',
          data:100,
          success(){
            console.log('存储成功')
          }
	})，
      getStorage() {
	uni.getStorage({
	  key:'id',
          success(res){
            console.log('获取成功', res.data)
          }
	})
...

条件注释

#ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾

导航跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

methods:{
  goDetail(){
    // navigator: 保留当前页面，跳转到应用内的某个页面
    uni.navigateTo({
      url:'/pages/detail/detail'
    })
  },
  goMessage(){
    // switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    uni.switchTab({
      url:'/pages/message/message'
    })
  },
  goMessage(){
  // redirecTo：关闭当前页面，跳转到应用内的某个页面。
    uni.redirecTo({
      url:'/pages/message/message'
    })
  },
}

Uni-app 组件

组件创建

// 1. 创建目录，新建组件文件
// 2. 在其他组件中导入该组件并注册
import login from "@/components/test.vue"
...
  components:{test}
// 3. 使用组件
<template>
  <view>
    <test></test>
...

组件通信

父传子

父用属性绑定的形式传递，子用props接收。

// 父组件 title 数据传递给子组件

<template>
  <view>
    <test :title="title"></test>
...    
import test from "@/components/test.vue"
...
  data(){
    return{
      title:"Hello"
    }
  },
  components:{test}

// 子组件 接收 title 数据
...
这是父组件传来的数据{{title}}
data(){},
props:[
  'title'
]

子传父

子用$emit触发事件进行传递参数

// 子组件 接收 title 数据
...
<button @click="sendNum">给父组件传值</button>

data(){
  return {
    num:3
  }
},
props:[
  'title'
],
methods(){
  sendNum(){
    this.$emit('myEvent', this.num)
  }
}

// 父组件注册 myEvent 事件
<test :title="title" @myEvent="getNum"></test>
这是子组件传递来的数据{{ num }}

data(){
  return{
    num: 0,
  }
},
methods(){
  getNum(num){
    this.num = num 
  }
}

Uni-app 组件库

使用 HBuilderX 导入插件

后台接口API

常见格式是：域名/api/具体接口

bezx.rdsskj.cn/api/ShopWeb…

举例：

image.png

获取到的banner轮播图image路径完整格式为：域名 + img 对应路径

bezx.rdsskj.cn/public/uplo…

image.png

商城项目实践

创建uni-app项目，调试运行在浏览器和小程序环境中。

鸣谢

卤蛋实验室作者的文章：跨端框架的核心技术到底是什么

后端api，bezx.rdsskj.cn/api/ShopWeb… data.act.icon目前为空，想加几个icon图标：

codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64266efb99e…

avatar
文章
阅读
粉丝