2020-04-16发表2021-06-19更新22 分钟读完 (大约3333个字)

uni-app 从入门到实践开发

uni-app

uni-app背景介绍

当前跨平台开发存在的3个问题
1、多端泛滥
2、体验不好
3、生态不丰富

uni-app 产品特征

1、跨平台更多 —— 条件编译：优雅的在一个项目里调用不同平台的特色功能！
2、运行体验更好 —— 组件、api与微信小程序一致，兼容 weex 原生渲染
3、通用技术栈，学习成本更低 —— vue 的语法、微信小程序的api、内嵌 mpvue
4、开放生态，组件更丰富 —— 支持通过 npm 安装第三方包、支持微信小程序自定义组件及 SDK、兼容 mpvue 组件及项目、App 端支持和原生混合编码、DCloud 将发布插件市场

功能框架

uni-app 规范

页面文件遵循 Vue 单文件组件（SFC）规范
组件标签靠近小程序规范
接口能力（JS API）靠近微信小程序规范
数据绑定及事件处理同 Vue.js 规范
为兼容多端运行，建议使用 flex 布局进行开发

条件编译

<template>
  <view class="content">
    <!--  #ifdef MP-WEIXIN  -->
    <view class="">
      只会编译到小程序
    </view>
    <!--  #endif  -->
    <!--  #ifdef APP-PLUS  -->
    <view class="">
      只会编译到 APP
    </view>
    <!--  #endif  -->
  </view>
</template>

生命周期

应用生命周期

页面生命周期

组件生命周期

组件

name

配置

pages.json

globalStyle

pages

API

快速创建项目

通过 HBuilderX 创建项目

通过vue-cli命令行创建项目

1
2
3

// 安装 vue cli
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

native.js

//  安卓 拨打电话
function call(){  
  // 导入Activity、Intent类  
  var Intent = plus.android.importClass("android.content.Intent");  
  var Uri = plus.android.importClass("android.net.Uri");  
  // 获取主Activity对象的实例  
  var main = plus.android.runtimeMainActivity();  
  // 创建Intent  
  var uri = Uri.parse("tel:10010"); // 这里可修改电话号码  
  var call = new Intent("android.intent.action.CALL",uri);  
  // 调用startActivity方法拨打电话  
  main.startActivity( call );  
  // ...  
}

uni-app 项目

目录结构

单文件

vue.js

文件导入

尺寸单位

rpx

代码块提示

HBuilderX 快捷键

项目发行

项目配置页面配置

pages style app-plus

微信小程序配置
condition:{
}

navigator 跳转

组件、组件生命周期

组件传值 props\emit、uni.$on、uni.$emit

uni-ui 组件库的引入

uni-app 规范

条件编译

App 端的 nvue 开发

HTML5+

组件、自定义组件、基础组件、生命周期、路由、API、语法、布局样式

Hbuiderx

vuecli方式

微信开放平台 unionid

交互反馈

redis 根据用户信息生成随机 key 登录根基这个生成的随机键来判断

（根据用户信息+上次登录的时间）-临时想法

uniapp 一键登录

e.currentTarget.id

e.target.id

获取系统信息

设置导航条

下拉刷新 onpullDownRefresh

上拉加载 onReachBottom

全局变量

节点信息

socket 的使用

import io from './common/weapp.socket.io.js'

Vue.prototype.socket = io('http://192.168.1.3:8082')


methods:{
	//  发送讯息
	send: function(){
		if(this.cont.length>0){
			this.arr.push(this.cont);
			let aa = this.cont
			this.socket.emit('message','aa')
		}
	}
	//  接受广播讯息
	getmsg: function(){
		this.socket.on('gbmsg',data=>{
			this.arr.push(data);
		})
	}
}

uni-app 去掉 App、h5 端的导航栏

pages.json

"globalStyle": {
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "uni-app",
  "navigationBarBackgroundColor": "#007AFF",
  "backgroundColor": "#FFFFFF",
  "h5": {
    "titleNView": false
  }
}

全局样式引入

vue

// App.vue 
<style>
  @import url('/common/free.css')
</style>

引入图标库

/* icon.css */
@font-face{
  font-family: "iconfont";
  src: url('data:base64') format('woff2');
}

// App.vue
<style>
  /* #ifndef APP-PLUS-NVUE */
  @import url('/common/icon.css')
  /* endif */
</style>

nvue

// 只支持 unicode
// App.vue
<script>
  onLaunch: function(){
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
      'fontFamily': "iconfont",
      'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
    });
  }
</script>

midButton 中间凸起按钮设置

{
  "pages": [{
      "path": "pages/component/index",
      "style": {
          "navigationBarTitleText": "组件"
      }
  }, {
      "path": "pages/API/index",
      "style": {
          "navigationBarTitleText": "接口"
      }
  }, {
      "path": "pages/component/view/index",
      "style": {
          "navigationBarTitleText": "view"
      }
  }],
  "condition": { //模式配置，仅开发期间生效
      "current": 0, //当前激活的模式（list 的索引项）
      "list": [{
          "name": "test", //模式名称
          "path": "pages/component/view/index" //启动页面，必选
      }]
  },
  "globalStyle": {
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "演示",
      "navigationBarBackgroundColor": "#F8F8F8",
      "backgroundColor": "#F8F8F8",
      "usingComponents":{
          "collapse-tree-item":"/components/collapse-tree-item"
      },
      "renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
      "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
      "rpxCalcMaxDeviceWidth": 960,
      "rpxCalcBaseDeviceWidth": 375,
      "rpxCalcIncludeWidth": 750
  },
  "tabBar": {
      "color": "#7A7E83",
      "selectedColor": "#3cc51f",
      "borderStyle": "black",
      "backgroundColor": "#ffffff",
      "height": "50px",
      "fontSize": "10px",
      "iconWidth": "24px",
      "spacing": "3px",
      "list": [{
          "pagePath": "pages/component/index",
          "iconPath": "static/image/icon_component.png",
          "selectedIconPath": "static/image/icon_component_HL.png",
          "text": "组件"
      }, {
          "pagePath": "pages/API/index",
          "iconPath": "static/image/icon_API.png",
          "selectedIconPath": "static/image/icon_API_HL.png",
          "text": "接口"
      }],
      "midButton": {
          "width": "80px",
          "height": "50px",
          "text": "文字",
          "iconPath": "static/image/midButton_iconPath.png",
          "iconWidth": "24px",
          "backgroundImage": "static/image/midButton_backgroundImage.png"
      }
  },
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "^uni-(.*)": "@/components/uni-$1.vue"
    }
  },
  "topWindow": {
    "path": "responsive/top-window.vue",
    "style": {
      "height": "44px"
    }
  },
  "leftWindow": {
    "path": "responsive/left-window.vue",
    "style": {
      "width": "300px"
    }
  },
  "rightWindow": {
    "path": "responsive/right-window.vue",
    "style": {
      "width": "300px"
    },
    "matchMedia": {
      "minWidth": 768
    }
  }
}

// 只支持 unicode
// App.vue
<script>
  onLaunch: function(){
   uni.onTabBarMidButtonTap(()=>{
   })
  }
</script>

业务

刷礼物

list
App nvue 专用组件
app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。

如果需要跨端，建议使用 uni-ui 的 uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。

// live.nvue
<template>
  <f-gift ref="gift"></f-gift>
</template>
<script>
  mounted(){
    setInterval(()=>{
      this.$refs.gift.send({
        username: '发送人',
        avatar: "",
        gift_name: '蛋糕',
        gift_image: '/static/gift/3.png',
        num: 1
      })
    })
  }
</script>

//  f-gift.vue 礼物组件
<template>
  <list style="width:520rpx;height:500rpx;" :show-scrollbar="false" :bounce="false">
    <!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
    <cell class="flex align-center px-3" v-for="(item, index) in dataList" :key="item.id" insert-animation="default" delete-animation="default">
      <view style="width: 325rpx;">
      </view>
    </cell>
  </list>
</template>

<script>
  const domModule = weex.requireModule('dom')

  export default {
    data () {
      return {
        gifts: [{}]
      }
    },
    method:{
      //  送礼物
      send(gift){
        this.gifts.push(gift)
        this.toBottom();
        this.autoHide();
      }
      //  置于底部
      toBottom(){
        this.$nextTick(() => {
          let index = this.gifts.length -1
          let ref = 'item' + index
          if(this.$refs[ref]){
            dom.scrollToElement(this.$refs[ref][0],{})
          }
        })
      },
      //  自动消失
      autoHide(){
        if(this.gifts.length){
          let timer = setTimeout(()=>{
            this.gifts.splice(0,1);  
          },5000)
        }
      }
    }
  }
</script>

弹幕

<template>
  <view>
    <scroll-view scroll-y="true" scroll-with-animation :scroll-inio-view="scrollInToView">
      <view :id="'danmu'+item.id" >
      </view>
    </scrioll-view>
  </view>
</template>
<script>
  methods: {
    toBottom(){
      let len = this.list.length;
      if(len > 0 && this.list[len-1]){
        this.scrollInToView = 'danmu' + this.list[len - 1].id
      } 
    }
  }
</script>

UI 框架

uView：uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)
ThorUI：简约而不简单一直是ThorUI的追求。ThorUI目前有微信小程序原生版本和uni-app版本，后续会扩展到其他原生版本，扩大生态。除了组件库ThorUI还会陆续发布一些常用模板，使开发更加高效。

目前组件与模板默认支持App端(IOS和Android)、H5、微信小程序、QQ小程序。

colorui：鲜亮的高饱和色彩，专注视觉的小程序组件库

报错

微信小程序

forceUpdate 错误

SystemError (appServiceSDKScriptError)
Cannot read property 'forceUpdate' of undefined
TypeError: Cannot read property 'forceUpdate' of undefined
    at http://127.0.0.1:28307/appservice/__dev__/WAService.js:2:1415111
    at http://127.0.0.1:28307/appservice/__dev__/WAService.js:2:633507
    at o (http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:3197)
    at e.exports.<anonymous> (http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:3577)
    at http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:1844
    at Array.forEach (<anonymous>)
    at WebSocket._ws.onmessage (http://127.0.0.1:28307/appservice/__dev__/asdebug.js:1:1826)
console.error @ VM38:1
errorReport @ VM45 WAService.js:2
(anonymous) @ VM45 WAService.js:2
(anonymous) @ VM45 WAService.js:2
o @ VM42 asdebug.js:1
(anonymous) @ VM42 asdebug.js:1
(anonymous) @ VM42 asdebug.js:1
_ws.onmessage @ VM42 asdebug.js:1

配置微信小程序 AppID

sitemap.json 错误

sitemap.json Error: 未找到入口 sitemap49.json 文件，或者文件读取失败，请检查后重新编译。

根目录下创建 sitemap.json 并配置

uni-app 图表

H5端流行的echart报表因为涉及大量dom操作，无法跨端使用，而wx-chart在跨端和更新方面都不足，如果要做小程序，推荐使用全端可用的uChart。
如只考虑H5端，也可以继续使用 echart、f2等常规web图表。
如不考虑小程序，那么App端和H5，还可以通过renderjs 技术来使用 echart、f2等web图表，功能性能比uchart更好。什么是renderjs、基于renderjs使用echart的示例

不开发APP，可以不使用nvue