好程序员web前端培训分享之uni-app学习笔记uni-app详解

　　好程序员web前端培训分享之uni-app学习笔记uni-app详解，uni-app (一套代码,多端发行)如果你会使用Vue那咱们继续吧!

什么是uni-app?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台。

诞生背景

多端泛滥 iOS、Android、H5、以及各种小程序多套平台,多套文档,加大开发维护成本

uni-app特点

1、跨平台

一套代码多端发行,而不失优雅(条件编译,保留不同平台独有特色功能方法调用)

åªä¼ç¼è¯å°ç¨åºâ

åªä¼ç¼è¯XXX

2、通用技术栈,学习成本低

Vue的语法,微信小程序Api,内嵌mpvue可以直接迁移,如果你会Vue可以直接入门

3、生态丰富

支持npm下载第三方模块,支持小程序自定义组件,SDK,兼容mpvue组件,支持原生混合编码

安装

可以下载两个进行配置 ,测试微信小程序与支付宝小程序同步实现

编译工具下载HBuilderX

微信小程序开发IDE

支付宝小程序 IDE

推荐使用 HBuildX 进行开发

跨多端小程序开发

创建目录

.打开HBuilderX

.左上角创建项目

.选择uni-app项目

.下面是提供几个Demo项目，可以创建学习

.项目名称能不能大写，创建项目

运行项目

一、找到创建项目uni里面的项目目录

二、找到 manifest.js文件输入

1、里面有所有平台配置文件

需要不通平台测试,需要分别配置不同平台

2、选择微信小程序配置

配置小程序AppID

点击最上面工具栏选择运行

选择运行到小程序模拟器

选择微信小程序开发工具

第一次配置小程序开发者工具,需要打开服务

三、打开微信小程序开发左上角小

安全设置，将服务端口开启。||工具 -> 设置 -> 安全设置，将服务端口开启。

四、选择HBuild停止服务,重新运行自动打开编辑工具

.nvue 是对weex的增强。如果你不开发App，那么你不太需要nvue。

发布测试

选择HBuild最上面工具栏,点击发布进行打包,根据命令行提示在点击微信开发者工具发布

注意不要直接修改微信开发工具目录,以HBuild开发目录为主

目录介绍

与小程序配置相似

pages //存放分页目录static //存放应用引用静态资源main.js //入口文件mainfest.json //跨平台所有配置项文件pages.json //全局配置文件,类似App.json uni.scss//全局scss文件,在分页任何位置,注意 style lang="scss" 需要设置 scssApp.vue // 应用配置，用来配置App全局样式以及监听

统一参照uni-app官方文档

初探uni-app

添加分页

.鼠标移动pages右键

.右键新建页面,注意检查pages.json文件会自动写入pages项,文件路径

pages.json文件 style 为分页配置项,类似小程序 page.json

修改 pages.json

知识点: uni-app分页配置在style里面写,globalStyle写全部样式配置,在一个配置文件,这里是有区别原生小程序开发,具体参照uni-app文档进行配置 pages.json

配置项

navigationBarBackgroundColor HexColor //#000000 导航栏背景颜色 navigationBarTextStyle String white //导航栏标题颜色，仅支持 black/white navigationBarTitleText String //导航栏标题文字内容 navigationStyle String default //导航栏样式，仅支持 default/custom。 backgroundColor HexColor //#ffffff 下拉窗口的背景色微信小程序

全局配置

globalStyle: {

//...全局配置}

局部配置参照 pages.style内容

pages数组,决定谁排在前面

修改pages导致文件查找失败,检查无误,重启编辑工具

pages:[

{
    path: "xxx/xxx/xxx",
    style: {
        //...局部配置        }
}]

系统自带底部tabBar栏配置

如果配置tabBar需要保证abBar第一个路由,配置在第一个pages的第一个

"tabBar": {

"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"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": "接口"
}]

}

常用基本操作

优先尝试根据Vue使用操作,例如使用 v-for 替换wx:for

表达式

仅此而已,有Vue使用相似,不能使用流程控制语句

â{{msg+'Msea'}}{{10-9}}{{0||"NB"}}

â{{'Msea'.indexOf('xxx')!==-1?'å¤ªåæéä»':'no'}}{{"æç±åäº¬å¤©å®é¨".substr(0,2)}}

å±æ§ç»å®

https://www.w3school.com.cn/i/eg_tulip.jpg'"/>

å¨ææ ·å¼

{{

+1}}666777

æä»¤

v-show

â{{'æ¬¢è¿'+name+'ç»é'}}æªç»é!!!!!

â{{val}} {{val+11}}

äºä»¶

<button @click.stop="test2">test</button></view>

遍历

```
{{ item.message }}           
```

{{ index }}. {{ name }}: {{ value }}

路由跳转

页面栈最多十层。使用uni.navigateTo频繁切换,会导致栈溢出,跳转失败

// 非tabbar配置的页面我们使用 navigateTo跳转时保留老页面,一般用于需要返回uni.navigateTo({

url: "../one/one?name=Msea"})// 跳转pages.json>tabbar>配置过的页面,使用 switchTabuni.switchTab({
url: "../one/one"})// 不保留当前页面,跳转非配置页面uni.redirectTo({
url: "../one/one"})

响应式单位rpx

推荐使用最近公告推荐使用rpx替代upx

基于苹果6 1px =2rpx

width:200rpx;
height:200rpx;
background:red;}.box2{
width:100px;
height:100px;
background:pink;}</style>

节点操作

微信小程序里面没有 window,document对象,那如果需要进行dom操作

var query=uni.createSelectorQuery();query.select(".titlerh").boundingClientRect((nodes)=>{

console.log(nodes)}).exec();query.select(".box1")
.boundingClientRect()
.selectAll(".box2")
.boundingClientRect()
.exec((res)=>{
  console.log(res);});

组件

创建文件夹 components目录统一写法,鼠标右键创建组件

所有组件与属性名都是小写，单词之间以连字符-连接。

<uni-test/></template><script>
import uniTest from "../../components/test.vue"
export default {
    data() {
        return {};
    },
    methods:{
        test(){
            this.text = "登录";
        }
    },
    components: {
       uniTest //引入组件        }
}</script><style lang="scss">
...style</style>

生命周期

应用生命周期 App.vue

App({

onLaunch (options) {

console.log("小程序初始化");

onShow (options)

console.log("小程序显示");

onHide () {

console.log("小程序隐藏");

}})

分页生命周期 pages

Page({

onLoad: function(options) {

// 页面创建时执行      console.log("页面加载");

onShow: function() {

console.log("页面进入");

onReady: function() {

console.log("页面首次渲染完毕时执行");

onHide: function() {

console.log("页面离开");

onPullDownRefresh: function() {

// 触发下拉刷新时执行    console.log("下拉触发");
//enablePullDownRefresh 开启下拉    },

onReachBottom: function() {

// 页面触底时执行    console.log("下拉到底");

onShareAppMessage: function (e) {

// 页面被用户分享时执行      //通过按钮调用      
  //点击触发弹窗      <button open-type="share">分享</button>  
  console.log("用户分享");  
  return {
      title: '妹子图片',
      path: '/pages/index/index', //当前页面 path          imageUrl: "/images/1.jpg",
      desc: '面向百度开发',
      success: (res) => {
          console.log("转发成功", res);
      },
      fail: (res) => {
          console.log("转发失败", res);
      }
  }

onPageScroll: function() {

console.log("页面滚动时执行");

onResize: function() {

console.log("屏幕旋转触发");

组件生命周期

uni-app components组件支持的生命周期，与vue标准组件的生命周期相同。wx小程序支持生命周期

beforeCreate(){} // 在实例初始化之后被调用created(){} // 在实例创建完成后被立即调用。beforeMount(){} // 在挂载开始之前被调用。mounted(){} // 挂载到实例上去之后调用。beforeDestroy(){} // 实例销毁之前调用。在这一步，实例仍然完全可用。

UI组件

uni-ui

使用方法与微信小程序一致,推荐使用uni-ui

<view style="                background:red;                width:200px;height:100px;                display:inline-block;"
    ></view>
    <view style="background:yellow;width:200px;height:100px;display:inline-block;"></view>
    <view style="background:pink;width:200px;height:100px;display:inline-block;"></view>
    <view style="background:blue;width:200px;height:100px;display:inline-block;"></view></scroll-view>

引入三方UI

例如 Vant Weapp 下载

.根目录下创建 wxcomponents

.将下载包内部 dist包粘贴到uni-app根目录wxcomponents文件夹下

.配置

{

"path" : "pages/one/one",
    "style" : {
        "usingComponents":{
            "van-button": "/wxcomponents/dist/button/index" //参照wx组件引
        }
    }}

.在App.vue,引入样式

/*每个页面公共css */
@import "/wxcomponents/dist/common/index.wxss";</style>

.在one分页内直接使用van-button组件,不需要引入

.注意如果报错,检查路径如果没有问题,可以选择重编辑器重新启动微信开发工具

常用API调用

获取用户授权弹窗

获取头像昵称 getUserInfo: function(e) {

app.globalData.userInfo = e.detail.userInfo
this.setData({
    userInfo: e.detail.userInfo,
    hasUserInfo: true
})}

返回所有用户授权

wx.getSetting({success:()=>{"返回用户所有用户授权"}})

照相机接口

因为,调用照相机获取临时图片格式,直接上传三方服务器,是不支持的,需要微信做解析,转发

wx.uploadFile 上传微信需要做转发看不到传输的参数

uni.chooseImage({

count: 1, //图片张数    sizeType: ['original', 'compressed'],//原图,压缩图,    sourceType: ['album', 'camera'],  //本地相册,拍照    success :res=> {
    const tempFilePaths = res.tempFilePaths//微信小程序图片临时路径        this.setData({tempFilePaths}); 
}})// 预览接口viewImgs(index) {
uni.previewImage({
    current: this.data.tempFilePaths[index], // 当前显示图片的http链接        urls:this.data.tempFilePaths // 需要预览的图片http链接列表    });},
//小程序图片上传    fileUplaod() {
uni.uploadFile({
  url: "http://wxs.ixinangou.net/index/index/dofiles",
  filePath: this.data.tempFilePaths[0],
  name: "file", //上传图片key      formData: {
    user: "MSea" //需要额外携带参数      },
  header: {
    "content-type": "multipart/form-data"
  },
  success: res => {
    console.log("data");
  }
});

请求

微信原生请求接口

注意设置,不效验合法域名,回忆怎么添加合法域名

//GET 会自动拼接参数//queryStringParamsuni.request({

method: "GET",
url: "https://cnodejs.org/api/v1/topics",
data: { 
    uname: "Msea"
},
success: (res) => {
    console.log(res)
}})//POST 默认参数为payLoad,为jsonuni.request({
method: "POST",
url: "https://cnodejs.org/api/v1/topics",
data: { 
    uname: "Msea" 
},
success: (res) => {
    console.log(res)
}})//POST form-data 数据 // 'content-type': 'multipart/form-data'  用于文件上传  uni.request({

url: '

https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312

data:{fileId:'123'},
method:'POST',
header: {
    'content-type': 'application/x-www-form-urlencoded'
},
success:function(res){}})

地图使用

地图组件

id="map" 
longitude="经度" 
latitude="纬度" 
scale="缩放级别(14)" 
bindcontroltap="点击地图触发FN" 
markers="{{添加标记}}" 
bindtap="markertap" 点解地图触发
show-location  将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。
style="width: 100%; height: 300px;"></map>

移动地图中心点

移动端测试有效

onShow: function() {

// 地图上下文对象    this.mapCtx = uni.createMapContext('map');

ckMap(e){
      //小程序不支持 Objcet.assign          var temp={
          iconPath: "/assets/img/local.png",
          id: 0,
          width: 25,
          height: 25,
          ...e.detail
      }
      var markers=this.data.markers;
      markers.push(temp);
      this.setData({markers},()=>{
          var data={
              ...e.detail
          };
          this.mapCtx.moveToLocation(data)
      })
  }

定位

uni.getLocation({

type: 'gcj02', //腾讯地图坐标系    success:(res)=> {
    const latitude = res.latitude
    const longitude = res.longitude
    }})

用户授权弹窗

app.json配置文件

//app.json{

"pages": ["pages/index/index"],

"permission": {

"scope.userLocation": {
  "desc": "熊猫创客需要获取您的位置亲" // 高速公路行驶持续后台定位
}

}}

获取当前位置并移动地图中心店

wx.getLocation({

type: 'gcj02', //腾讯地图坐标系    success: (res) => {
    const latitude = res.latitude
    const longitude = res.longitude
    var temp = {
        iconPath: "/assets/img/local.png",
        id: 0,
        width: 25,
        height: 25,
        latitude,
        longitude
    }
    var markers = this.data.markers;
    markers.push(temp);
    this.setData({
        markers
    }, () => {
        var data = {
            latitude,
            longitude
        };
        this.mapCtx.moveToLocation(data)
    })
}})

vuex

uni-app已经内置了vuex

.在项目的根目录下，创建一个名为store的文件夹然

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({

state: {
    num:0
},
mutations: {
    add(store){
            store.num++;
    }
},
actions: {}})export default store

.main.js入口文件引入

import store from './store'Vue.prototype.$store = store;

const app = new Vue({

...App,
store})app.$mount()

.组件内引入

<view>
    <view>{{num}}</view>
    <button @click="test">test1</button>
</view></template>

import {  
        mapState,  
        mapMutations  
    } from 'vuex';  
export default {
    computed:{
        ...mapState(['num'])
    },
    methods:{
        test() {
            console.log(this.$store.commit("add"))
        }
    }
}</script>

条件编译

可以安装支付宝小程序进行测试

#ifdef %PLATFORM%

//这些代码只在该平台编译 #endif

#ifdef ： if defined 仅在某个平台编译#ifndef ： if not defined 在除里该平台的其他编译#endif ： end if 结束条件编译%PLATFORM% 需要编译的平台，上面的MP就是各个小程序的意思

常用 %PLATFORM% h5 h5平台MP-WEIXIN 微信小程序MP-ALIPAY 支付宝小程序MP-BAIDU 百度小城MP-TOUTIAO 头条小程序

总结: 优先使用Vue用法,只要实现微信开发,支持wx,ui,api,统一使用uni的Api,多看文档

好程序员web前端培训分享之uni-app学习笔记uni-app详解

继续阅读

[转]iOS微信小视频优化心得

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

Android电视机（机顶盒）初次开发的一些经验分享

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

android 主线程的相关问题

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

面试题解析：你接口测试是怎么做的？

layui多任务上传添加进度条