uniapp

最新推荐文章于 2024-08-30 09:59:48 发布

CVandDiv战士

最新推荐文章于 2024-08-30 09:59:48 发布

阅读量197

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_51214139/article/details/117198154

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

uniapp的特点

一次开发，多端应用
使用微信小程序的组件标签和API，使用vue的模板语法和js语法

创建新页面

小程序：在app.json中配置pages,即会在pages文件夹中创建相应的文件
uniapp: 在pages.json中配置页面，但不会同步的生成文件
uniapp: 在pages文件夹上右键，新建页面，会同步的在pages.json中自动生成对应的配置

pages.json中pages的配置相当于路由，所有页面都需要在此注册

tabBar的配置

在pages.json中配置

本地静态资源，比如图片，图标文件一定要放在static文件夹中，引用地址的方式参考下方代码

"tabBar": {
	    "color": "#567788",
	    "selectedColor": "#f96677",
	    "list": [
	      {
	        "pagePath": "pages/index/index",
	        "text": "首页",
	        "iconPath": "/static/images/icon0.png",
	        "selectedIconPath": "/static/images/icon1.png"
	      },
	      {
	        "pagePath": "pages/category/category",
	        "text": "分类",
			"iconPath": "/static/images/icon2.png",
			"selectedIconPath": "/static/images/icon3.png"
	      }
	    ]
}

页面导航栏标题文本，背景颜色，下拉刷新等相关配置

小程序：在app.json中全局配置，在每个页面的json文件中给当前页面配置
uniapp: 全局和每个页面的配置都在pages.json中实现

如何运行在微信开发者工具

运行-> 运行到小程序模拟器 -> 微信开发者工具
在弹窗中要定位开发者工具的安装路径：常规安装位置 c:/Program Files/Tencent/微信web开发者工具
在微信开发者工具管理项目的界面 -> 设置 -> 安全 -> 开启服务端口
如果没有开启服务端口，在Hbuiler编译界面会报错：Error: read EBADF
在manifest.json中填写微信小程序的appid

如果没有填写，在微信开发者工具中会报错：TypeError: Cannot read property ‘forceUpdate’ of undefined

使用vuex状态管理工具

和vue唯一的不同是不需要安装vuex包

创建store文件夹，和index.js，及相关的state,actions,mutations…

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		city: '郑州'
	},
	actions: {
		getData(ctx,city){
			setTimeout(()=>{
				let newCity = city
				ctx.commit("changeData",newCity)
			},5000)
		}
	},
	mutations: {
		changeData(state,data){
			state.city = data;
		}
	}
})

在main.js中引入store并注册
在页面中使用时和vue相同

在项目中使用sass

在*.vue文件中添加lang=“scss”

<style lang="scss">
</style>

如果没有安装sass,在编译时会报错
可在“工具”菜单，选插件安装，会打开插件市场的链接，选择sass,按照引导安装插件即可
项目初始化时创建的uni.scss文件不用导入，定义的变量可直接在任一页面中使用
引入scss和css文件的语法

<style lang="scss">
	@import  "./var.scss";
	@import "./header.css";
</style>

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

判断平台

编译期判断编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。

在*.vue文件中，template,script,style中都可以添加条件编译，注意在不同区块中注释的写法是不同的

<!-- #ifdef H5 -->
	<view>当前城市： {{$store.state.city}}</view>
<!-- #endif  -->

<!-- #ifdef MP-WEIXIN -->
	<view>当前温度： 18度</view>
<!-- #endif  -->

<!-- #ifdef APP-PLUS -->
	<view>当前温度： 18度</view>
<!-- #endif  -->

运行期判断运行期判断是指代码已经打入包中，仍然需要在运行期判断平台

只能区别机型（ios,Android）

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

CSS变量

–status-bar-height 系统状态栏高度
–window-top 内容区域距离顶部的距离
–window-bottom 内容区域距离底部的距离

比如：自定义导航栏时，要空出状态栏的位置，可添加一个空的view进行占位

<view>
	<view class="header"></view>
	<view>list文本内容</view>
</view>

<style>
	.header {
		height: var(--status-bar-height);
		width: 100%;
		border: 1px solid #007AFF ;
	}
</style>

css单位

rpx

页面中引入组件时的easycom规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

在模板中vue和小程序的区别

动态属性

//数据 url="/images/1.jpg"

//vue
<image :src="'http://m.mi.com' + url"></image>
<image :src="`http://m.mi.com${url}`"></image>

//小程序: 动态属性绝对不加: ,""内部为字符串，需要绑定数据时加{{}}

<image src="http://m.mi.com{{url}}"></image>

标签内容显示相同

//数据：  msg="hello"
<view>{{msg}}</view>

循环遍历

// vue
<view v-for="(item,index) in list"></view>

//小程序
<view wx:for="{{list}}"></view>

条件渲染

// vue
<view v-if="true"></view>

//小程序
<view wx:if="{{true}}"></view>

用navigator组件进行跳转

<view class="container">
	<navigator class="item" v-for="(item,index) in list" :key="index" :url="`/pages/detail/detail?id=${item.id}`">
		<view>id: {{item.id}}</view>
		<view>goodsName: {{item.goods_name}}</view>
	</navigator>
</view>

也可以用uni.navigateTo跳转传参，在下一个页面中，通过onLoad(options)接收参数

模板向js逻辑传参

uniapp传参

  <view @click="getData(3)"></view>
  ...
  
  getData(params){
	console.log(params)  //3
  }

小程序传参

  <view bindtap="getData" data-index="3"></view>
  ...
  
  getData(e){
	console.log(e.currentTarget.dataset.index)  //3
  }

发行

发行h5页面
发行 -> 网站 H5手机版 ------>把项目编译打包在unpackage/dist/build/h5
把该文件夹传给后端即可（注意： h5页面必须在服务器下才能正常运行）
发行微信小程序
发行—>小程序微信 -----把项目编译打包在/unpackage/dist/build/mp-weixin
可以在微信开发者工具中直接上传该版本
发行为原生APP
发行—>原生App 本地打包