前言
最近一直没有更新博客，因为要准备考研了。不是说一直没有学习技术，只是因为时间有限，所以有些学习了以后就没有系统的整理笔记，更没有时间整理博客了。明天周六，所以今天晚上就决定抽点时间更新一篇博客。
初识uni-app
相信不少小伙伴对于uni-app是早有耳闻，当然，我也一样，从开始搞小程序的时候就听说现在都在用uni-app开发小程序了，很少有人用微信原生语法。但是，我觉得吧，饭还是得一口一口吃，路也要一步一步走。所以我选择在学完微信小程序原生开发以后学习uni-app。当然，在学习它之前我也已经学习了vue基础语法，因为这个框架就是基于vue来写的，所以，如果你没有学习过vue相关知识的话请移步这里。vue基础笔记
准备工作
学习新技术切记不能盲目，因为只有准备得当才能尽可能少的踩坑。我们首先看看uni-app的官网uni-app官网，通过官网的介绍我们知道了uni-app不仅解决了原生微信小程序语法的不便捷性，更实现了一套代码多端部署，这对于前端开发来说可是福音。下面是官网首页的介绍
开发规范
看完文档明白下面这点东西基本就可以正式开始了。为实现多端巧妙，综合考虑综合速度、运行性能等因素，uni-app约定了如下开发规范：
- 页面文件遵循Vue单文件组件（SFC）规范
- 组件标签靠近小程序规范，详见uni-app组件规范
- 接口能力（JS API）靠近微信小程序规范，但需将其植入wx为uni，详见uni-app接口规范
- 数据绑定及事件处理同Vue.js规范，同时补充了应用程序及页面的生命周期
- 为想要多端运行，建议使用flex布局进行开发
开发工具介绍
编写uni-app项目我们推荐使用主流前端编译器HBuilder，百度百科对于这款编辑器的介绍很少，但是明确指出他的特点是：快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
开始uni-app
新建项目
1 . 打开HBuilder编辑器，单击文件——>选择新建——>选择项目；
2. 选择uni-app项目，填写项目名并选择存储位置，单击创建按钮；
3. 项目创建完成，基础项目目录结构如下；
| 名称 | 作用 |
|---|---|
| pages | 业务页面文件存放的目录 |
| static | 存放应用引用的本地静态资源，注意：静态资源只能存放于此 |
| main.js | Vue初始化入口文件 |
| App.vue | 应用配置，用来配置App全局样式以及监听 应用生命周期 |
| manifest.json | 配置应用名称、appid、logo、版本等打包信息 |
| pages.json | 配置页面路由、导航条、选项卡等页面类信息 |
| uni.scss | 这里是uni-app内置的常用样式变量 |
- 到这里你的第一个uni-app的项目就算是新建完成了。
编写项目代码
这里对vue里的几个基础标签做个简单的示例；
<template>
<view>
<text>{
{str}}</text>
<view v-for="(item,index) in namelist" :key="index">{
{index}}---{
{item}}</view>
<view v-if="isok">
<button @tap="signup">我要参加</button>
<button @tap="nextpage">下一个页面</button>
</view>
<button @tap="changevalue">改变状态</button>
</view>
</template>
<script>
export default {
data() {
return {
str:"hello,uni-app",
namelist:['15266325544','15477896524','18756422586'],
isok:true
}
},
methods: {
signup:function(){
uni.showToast({
title:'你点击了报名'
})
},
nextpage:function(){
uni.navigateTo({
url:'../sign/sign'
})
},
changevalue:function(){
this.isok = !this.isok;
}
}
}
</script>
<style>
</style>
测试效果演示
uni-app简单使用
上面我们一起尝试使用了uni-app的几个简单语法。不难发现，其实就是小程序和vue融合在了一起，对于熟悉小程序和vue的前端开发者来说真的是毫无难度，基本可以直接上手使用。下面我将尝试使用uni-app实现一个简单的demo页面的开发，让大家一起来感受一下uni-app在项目中的使用。
在这里就不多赘述了，直接上代码和最终的效果，后面我也会尝试使用uni-app开发一款实际的小程序，一起来看看吧。
- login.less
<template>
<view>
<image src="../../static/logo-1.png" class="logo" model="withFix"></image>
<!-- mode="widthFix"保持宽高比例不变 -->
<view class="logo-title">uni-app测试项目</view>
<view class="logo-subtitle">2021 12 11</view>
<button class="login-btn" open-type="getUserInfo" @tap="login()">登录系统</button>
<view class="register-container">
没有账号?
<text class="register" @tap="toRegister()">立即注册</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
login:function(){
uni.showToast({
title:'点击登录'
})
},
toRegister:function(){
uni.navigateTo({
url:"../register/register"
})
}
}
}
</script>
<style lang="less">
@import url("login.less");
</style>
- login.vue
@import url("../../style.less");
.logo {
// 图片尺寸是页面的70%
width: 70%;
// 左右水平相同，居中
margin-left: auto;
margin-right: auto;
// 前提是block模型才行左右居中
display: block;
// 不能巨顶
margin-top: 30%;
}
.logo-title {
// 字体大小
font-size: 48rpx;
// 字体加粗
font-weight: bold;
// 文本位置
text-align: center;
// 距离上个模块间距大概8%
margin-top: 8%;
color: @font-color;
}
.logo-subtitle {
font-size: 34rpx;
text-align: center;
color: @font-color;
margin-top: 20rpx;
}
.login-btn {
//页面的60
width: 60%;
//绝对定位
position: absolute;
//底部定位
bottom: 20%;
// 距离左侧
left: 20%;
//背景色
background-color: @background-color;
//文字是白色的
color: #fff;
//尺寸不会变
box-sizing: border-box;
border-radius: 25rpx;
//点击之后的变色、（伪色）
}
.login-btn:active{
background-color: @background-color-active;
}
.register-container{
position: absolute;
bottom: 50rpx;
//定义宽度100%，加上absolute后是内容的宽度，而不是页面的宽度了
//强制成页面的宽度
width: 100%;
text-align: center;
font-size: 30rpx;
color: @font-color;
}
.register-container .register{
color: @background-color;
}
- 最终效果
总结
ok呀，到这里差不多我们就已经了解了uni-app的简单使用，如果你也对它感兴趣，就赶紧上手试试吧。期待后面能用这个框架写一个完整的项目试试。
冲冲！！！
author： KK
time 2021年12月11日23:21:51
flag：9/30