uni-app

（Union Application）是一个基于Vue.js的前端框架；开发规范借鉴了微信小程序

前端技能点：

前后端分离，后端给接口和API文档，注重前端
用uni-app框架

作用：

创业团队可以更快的开发上线一个app，更容易抢占互联网市场，获取利润
原先多个人开发的工作现在只需要一个人完成，节省人力物力成本
个人开发者私活利器，包办多端产品
毕业设计多平台

优势：

同一套代码编译多端（Android、IOS、H5、小程序）
接近原生系统，效率更好
利用Hbuiler X，开发效率高，内存占用少
开发（人力、维护、时间）成本低
学过Vue之后，学习成本很低
支持npm与自定义组件
社区活跃，版本迭代快

HBuilder X调试

点击工具-设置，添加小程序运行配置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qrwpm0H4-1620737310925)(D:\Desktop\markdown学习笔记\前端\uni-app.assets\image-20210329095358519.png)]

点击运行按钮-微信小程序开发者工具，会自动打开开发工具并运行：

Vue.js简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

MVC与MVVN思想

后端MVC开发模式

Model（数据增删改）+View（前端页面）+Controller（处理业务+路由）

前端MVVN开发模式

View（页面HTML）+Model（单页面的静态数据JSON）+ViewModel（核心调度者协调器）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5UPvXssA-1620737310932)(D:\Desktop\markdown学习笔记\前端\uni-app.assets\image-20210329111637677.png)]

ViewModel实现数据双向绑定：

数据丢给VM来做数据渲染的动作，再交给HTML
如果用户修改了HTML的数据，VM会再次传递到Model里面

测试MVVN双向绑定

uni-app框架中的页面全是.vue，编写第一个index.vue代码：

<!-- <template> <script> <style>这三个标签在每个页面都只能存在一个templete：View-->
<template><!-- div --><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><!-- 虚拟DOM：数据双向绑定 --><text class="title">{{title}}</text> <!-- :value 数据与data中的title进行绑定@input 事件绑定  "change" 事件名称--><input type="text" :value="title" @input="change"/></view></view>
</template><script>// VM对象：协调者 调度器export default {// Model:所有的数据data() {return {title: 'Hello'}},onLoad() {},// methods：所有用户自定义的方法methods: {change(e){var txtTitle=e.detail.value;// 更新data中的titlethis.title=txtTitle;}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

测试结果：input框中输入的内容，可以同步的回显在text页面框中

vue同样支持JSON对象和数组的渲染：

<view>I am {{student.age}} years old. <br/>I have skills such as: {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}}
</view>data() {return {title: 'Hello',student:{age:18},skill:["Java","HTML","CSS","Vue","uni-app"]}},

页面路由以及标题配置

页面路由

pages底下所有的页面都要在pages.json中配置页面路由，实际上创建页面时，框架也会为我们自动创建：

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{ //自动创建"path" : "pages/hello/hello","style" :                                                                                    {"navigationBarTitleText": "私有页面标题",  //覆盖全局标题"enablePullDownRefresh": false}}],"globalStyle": {   //标题栏"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8",   //导航栏颜色"backgroundColor": "#F8F8F8"  //窗口背景色}
}

标题配置

 "globalStyle": {   //标题栏"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8",   //导航栏颜色"backgroundColor": "#F8F8F8"  //窗口背景色//查看uni-app官网，有更多的参数属性可以配置}

宏观讲解项目配置

项目结构

static文件：css、js、jpg

unpackage文件：打包目录，会构建一个dev/app-plus（手机）、dev/mp-weixin（小程序）；发布会有一个build/app-plus。

App.vue：提取每个页面公共css，可以在其他vue中使用（可以被局部style覆盖）

<style>/*每个页面公共css */.green{background-color: #4CD964;}
</style><view class="green" style="width: 300px; height: 300px;"> 调用 </view>

main.js：项目的入口文件，可以统一配置全局的对象、数组、函数（如url与用户信息）

manifest.json：项目配置与发布

项目默认分配一个uni-app；
App图标、启动图配置是发布用的；
App模块权限是第三方的权限（支付、定位、摄象头等）
h5配置（https设置、端口设置）
微信小程序配置（官方的App ID、本地测试环境建议取消勾选“检查安全域名和TLS版本”）

uni.scss：常用变量样式，预处理，用于插件开发

应用与页面的生命周期

应用的生命周期

app.vue中的函数触发时机：

<script>export default {onLaunch: function() { //当uni-app 初始化完成时触发（全局只触发一次）console.log('App Launch')},onShow: function() { //当 uni-app 启动，或从后台进入前台显示console.log('App Show')},onHide: function() { //当 uni-app 从前台进入后台console.log('App Hide')}}
</script>

微信小程序中额外的两个生命周期触发方法	触发时机
onError	当 `uni-app` 报错时触发
onPageNotFound	页面不存在监听函数

页面的生命周期

除了应用的触发方法，还有一些方法，可以查看官方文档：https://uniapp.dcloud.io/

onLoad() {console.log('页面加载')
},
onShow() {console.log('页面显示')
},
onReady() {console.log('页面初次渲染完成')
},
onHide() {console.log('页面隐藏')
},
onUnload() {console.log('页面关闭')
},
onShareAppMessage() {console.log('页面分享')
},
onPageScroll() {console.log('页面滚动')
},
onBackPress() {   // 不支持小程序，通常写在onLoad中console.log('页面返回')
},

由于测试需要跳转，跳转代码如下：

 <!-- open-type对应onBackPress()页面跳转 --><navigator url="../index/index" open-type="navigateBack"><view class="green" style="width: 300px; height: 300px;"></view></navigator>

px&upx像素

px是固定大小的像素，但每个手机的像素不一致，为了兼容不同的机型，引入了upx，根据屏幕大小做自适应。

750upx是屏幕的宽度，可以在不同机型上做自适应，1：1的显示一个正方形：

<view class="green" style="width: 750upx; height: 750upx;"></view>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JUFgJCdj-1620737310935)(D:\Desktop\markdown学习笔记\前端\uni-app.assets\image-20210330113009171.png)]

注意：字体和变宽都会设定为固定像素，用px即可（并不是所有地方都用upx）

数据绑定

在标签外部，都用{{表达式}}

{{student.age+'1'}}   //字符串拼接{{student.age>=18 ? '成年':'未成年'}}   //三元表达式

v-bind:

在标签内时，需要用v-bind:（也可以只写一个:）

<navigator v-bind:url=url >

事件处理

用户与应用交互的方式

创建event.vue做一些简单的测试：

<template> <view>        <input type="text"  style="width: 300upx; height: 100upx; color: #55430e;"      @input="change"         @focus="focus"          @blur="blur"                @confirm="confirm"      @tap="tap"      @longpress="longpress"      @touchstart="touchstart"        @touchend="touchend"        @touchmove="touchmove"      />  </view></template><script>    export default {        data() {            return {                            }       },      methods: {  //所有函数写在methods对象中          focus(){                console.log("获得焦点")           },          blur(){             console.log("失去焦点")           },          confirm(){              console.log("点击完成/回车")            },          tap(){              console.log("触摸按压")           },          longpress(){                console.log("长按")         },          touchstart(){               console.log("触摸开始")           },          touchend(){             console.log("触摸结束")           },          touchmove(){                console.log("触摸移动")           },      }   }</script>

条件语法

条件渲染v-if与v-show

 <view>        <view v-if="isShow">           now you see me      </view>       <view v-else>         can not see         </view>       <!-- false：在前端隐藏整个标签的代码 -->        <view v-show="isShow">         now you see me      </view>   </view>

三元运算

     <view v-if="sex==1?true:false">          男       </view>               <view v-if="sex==1">         男       </view>       <view v-else-if="sex==0">            女       </view>       <view v-else>         未知      </view>

列表渲染嵌套v-for

嵌套双循环需要指定index避免冲突

<template> <view>        <!-- (stu,stuIndex)   (对象，下标)  下标可以省略，但是在多重循环中，避免index冲突，显示定义成不一样的-->     <view v-for="(stu,stuIndex) in stuArray">          <view>学生姓名：{{stu.name}},年龄：{{stu.age}}</view>         <view>                擅长技能：                <!-- <view v-for="skill in stu.skills">{{skill}}</view> -->                <!-- block只显示对象的元素（简单的字符串拼接），而view显示标签（会换行） -->                <block v-for="(skill,skillIndex) in stu.skills">{{skill}},</block>           </view>       </view>   </view></template><script>    export default {        data() {            return {//循环遍历一个列表              stuArray:[                  {                       name:"joey",                      age:21,                     skills:["Java","HTML","CSS","Vue","uni-app"],                 },                  {                       name:"carmine",                       age:22,                     skills:["Java","HTML","uni-app"],                 },                  {                       name:"spark",                     age:23,                     skills:["HTML","CSS","Vue","uni-app"],                  }               ]           }       },      methods: {                  }   }</script>

:key的作用

<!-- :key  保证组件和数据捆绑唯一 --><view v-for="stu in stuArray" :key="stu.id">    <!-- 用:value使复选款的value与{{}}表达式关联 -->    <checkbox :value="stu.name" >{{stu.name}}</checkbox></view><button type="primary" @click="addStu">新增学生</button>

条件编译（跨端）

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

支持的文件

.vue

    <!-- #ifdef H5  -->    <view> 只在H5编译 </view>    <!-- #endif -->    <!-- #ifdef MP-WEIXIN  -->    <view> 只在微信小程序编译 </view>    <!-- #endif -->    <!-- #ifndef MP  -->    <view> 不在小程序全端编译，只在IOS、Android、H5编译 </view>    <!-- #endif -->

 onLoad() {      // #ifdef H5        console.log("只在H5编译");        // #endif   },

.css

<style>    /* 在多端显示不同的颜色 */    .color {        /* #ifdef H5 */     background-color: #4CD964;      /* #endif */                /* #ifdef APP-PLUS */       background-color: #007AFF;      /* #endif */                width: 200upx;      height: 200upx; }</style>

Flex自适应布局（重点）

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

Flex容器的属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {  flex-direction: row | row-reverse | column | column-reverse;}

flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{  flex-wrap: nowrap | wrap | wrap-reverse;  不换行 | 换行 | 换行，第一行在上方;}

justify-content属性定义了项目在主轴上的对齐方式

.box {  justify-content: flex-start | flex-end | center | space-between | space-around;}flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等（等比）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上对齐方式

.box {  align-items: flex-start | flex-end | center | baseline | stretch;}baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（把轴线当作item来进行排列）

.box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;  }

导入外部样式

<style>    @import url("flex.css");</style>

Flex元素的属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {  order: <integer>;}

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {  flex-grow: <number>; /* 全为1 就等比放大*/}

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {  flex-shrink: <number>; /* 设置为0 就不进行缩放 */}

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {  flex-basis: <length> | auto; /* 可以直接设置像素300upx */}

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

项目实战

tabBar

配置在page.json中：

"tabBar":{     "color":"#8F8F94",      "selectedColor":"#007AFF",      "backgroundColor":"#FFFFFF",        "borderStyle":"black",      "list":[          {               "pagePath":"pages/index/index",             "text":"首页",                "iconPath":"static/tabBar/index1.png",              "selectedIconPath":"static/tabBar/index2.png"           },          {               "pagePath":"pages/me/me",               "text":"我的",                "iconPath":"static/tabBar/mine1.png",               "selectedIconPath":"static/tabBar/mine2.png"            },          {               "pagePath":"pages/search/search",               "text":"搜索",                "iconPath":"static/tabBar/search1.png",             "selectedIconPath":"static/tabBar/search2.png"          }       ]   }

swiper轮播图组件

Tips：输入"usw"，可以自动生成swiper的模板

<view class="page">    <swiper :indicator-dots="true" :autoplay="true" class="carousel">        <swiper-item>            <image src="../../static/swiper/swiper_1.jpg" class="carousel"></image>        </swiper-item>        <swiper-item>            <image src="../../static/swiper/swiper_2.jpg" class="carousel"></image>        </swiper-item>    </swiper></view>

.carousel {  width: 100%;    height: 440upx;   //根据图片的高度而设定}

拉取数据swiperList（json），并进行列表渲染：

<swiper-item v-for="swiper in swiperList">    <image :src="swiper.image" class="carousel"></image></swiper-item>

原生导航栏禁用

ps：小程序中的状态栏禁不掉

在pages.json中的style属性添加禁用：

"style": {    "app-plus": {        "titleNView":false  //禁用    }}

引入组件实现全局变量

方法一

在commons/commons.js中提取全局变量：

//提取公共文件const doubanUrl ="https://images.weserv.nl";  //豆瓣电影export default{   doubanUrl  //常量导出}

导入common：

import common from "../../commons/commons.js"//拼接使用"image":common.doubanUrl+"/?url=img1.doubanio.com/view/photo/l/public/p2410755737.webp",

方法二

也可以在main.js中挂载到Vue：

Vue.prototype.doubanUrl="https://images.weserv.nl";

所有页面都可以获取Vue对象（this.即可，无需import）：

"image":this.doubanUrl+"/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp",

小程序Https

需要登录之后对域名进行配置，并且只支持Https协议。

一旦允许某些域名之后，就可以不用勾选“不校验合法域名、HTTPs证书”。

scroll-view可滚动视图

通过本地json获取热门影像的数据：

// 获取热门数据getHotData(){    // 特别注意：非H5端不能用uni.request来请求本地json数据！！！    // const dataRes=await this.$http({url:'/new_movies.json'})    const {subjects:dataRes}=require('../../static/mock/top250.json')    // 截取10条数据    let newArr=[]    for(let i=0;i<dataRes.length;i++){        if(i+this.hotCount-10<this.hotCount){            let item=dataRes[i+this.hotCount-10]            // 对图片做处理            item.images.small=item.images.small.replace('https://','https://images.weserv.nl/?url=')            newArr.push(item)        }    }    this.hotData=[...this.hotData,...newArr]},

利用v-for来列表渲染动态的滚动视图（评分稍后补充）：

<scroll-view scroll-x="true" class="page-block hot">    <view class="single-poster" v-for="item in hotData" :key="item.id">        <view class="poster-wapper">            <image :src="item.images.small"  class="poster"></image>            <view class="movie-name">                {{item.title}}            </view>            <view class="movie-score-wapper">                ...                <view class="movie-score">                    9.0                </view>            </view>        </view>    </view></scroll-view>

自定义组件

编写components/helloComp.vue文件：

<!-- 定义组件名称为 helloComp --><template name="helloComp"> <view>        {{msg}}     <!-- 动态接收 -->     <input type="text" :value="myval" class="txt"/>  </view></template><script>    export default {        //定义组件名称为 helloComp     name:"helloComp",     data() {            return {                msg:"这是自定义组件~~~"          };      },      //定义组件内部使用的属性       props:{         //自定义变量，用于接收父组件（首页或者其他页面）传入的参数值            myval:{ //传入的是一个对象              type: String //定义参数类型           }       }   }</script><style>   .txt{       color: red; }</style>

在需要使用的vue中导入：

 // 导入自定义组件  import helloComp from "../../components/helloComp.vue"

在components对象中注册组件：

     components:{   //在components对象中注册           helloComp,          trailerStars        }

在template中使用组件：

    <!-- 使用自定义组件 -->    <helloComp myval="Hello next~~~"></helloComp>

通过自定义组件动态显示得分

评分+星星的组件：

<template name="trailerStars">  <view>        <view class="movie-score-wapper">          <image v-for="yellow in yellowScore"          src="../static/icons/star-yellow.png" class="star-icon"></image>         <image v-for="gray in grayScore"          src="../static/icons/star-gray.png" class="star-icon"></image>                       <view class="movie-score" v-if="showNum==1">              {{innerScore}}          </view>       </view>   </view></template><script>    export default {        name:"trailerStars",      data() {            return {                yellowScore:0,              grayScore:5    //默认显示5个灰色星星         };      },      props:{         innerScore:0,  //定义外部传入的分数          showNum:0      //定义是否需要显示具体的得分数  1:显示 0:不显示     },      //生命周期，组件创建完成后被调用        created() {         var tempScore=0            if(this.innerScore != null && this.innerScore != undefined && this.innerScore != ''){              tempScore=this.innerScore;         }           this.yellowScore=parseInt(tempScore/2);  //计算黄色星星          this.grayScore=5-this.yellowScore;     }   }</script><style>   .movie-score-wapper{        display: flex;      flex-direction: row;    }   .star-icon{     width: 20upx;       height: 20upx;      margin-top: 6upx;   }   .movie-score{       font-size: 12px;        color: grey;        margin-left: 8upx;  }</style>

调用组件：

<trailerStars :innerScore="item.rating.average" showNum="1"></trailerStars>

vedio组件开发

vedio组件来开发热门视频模块（hotTrailerList从猫眼电影拿）：

<view class="hot-movies page-block">    <video v-for="hotTrailer in hotTrailerList" :src="hotTrailer.src"     :poster="hotTrailer.poster" class="hot-movie-single" controls>    </video></view>

配置相应的CSS样式：

/* 热门预告 */.hot-movies{   display: flex;  flex-direction: row;    flex-wrap: wrap;    justify-content: space-between;   //视频间隙    padding: 0 20upx 20upx 20upx;}.hot-movie-single{    width: 350upx;  height: 220upx; margin-top: 10upx;}

微信小程序开发入门——uni-app框架相关推荐

从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门主讲人介绍沁修,葡萄藤技术总监项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结直播录屏版 https://v.qq.com/x/page/n ...
微信小程序开发入门（连载）—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具前往开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
微信小程序开发入门（连载）—— 认识微信小程序
从今天开始,为大家开一门连载课程 --<微信小程序开发入门>. 2011 年,腾讯公司新的即时通讯社交软件微信正式上线,凭借其新颖的设计风格和良好的使用体验,微信很快就获得了大量的用户.据 ...
微信小程序开发入门要学哪些内容
微信小程序开发入门要学哪些内容?微信小程序需要学习的知识点:注册登录.开发工具安装.配置.样式.组件.微信小程序数据渲染.网络请求API.获取用户信息API等,了解开发者工具.原生框架.模板语法.组件 ...
《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看目录第1章微信小程序入门第1章第1节 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
《微信小程序开发入门精要》——第2章，第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
微信小程序开发入门（连载）—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
微信小程序开发入门（连载）—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...
uniapp + vue3微信小程序开发（1）框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...

微信小程序开发入门——uni-app框架