uniapp开发(由浅到深)

这篇具有很好参考价值的文章主要介绍了uniapp开发(由浅到深)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp开发(由浅到深),小程序,uni-app,rust,开发语言

1. 项目构建

1.1 脚手架构建

  • 全局安装脚手架
  • npm install -g @vue/cli@4 切记安装4.x.x的版本
  • 创建项目

vue create -p dcloudio/uni-preset-vue my-project

  • 默认模板uniapp开发(由浅到深),小程序,uni-app,rust,开发语言
  • 执行命令参考 package.json

1.2 HBuilderX创建 uni-app项目步骤:

  • 点工具栏里的文件 -> 新建 -> 项目
    uniapp开发(由浅到深),小程序,uni-app,rust,开发语言

2 . 包依赖

2.1 uView

  1. 安装依赖 (注意:项目名称不能有中文字符)
   // 安装sass
   npm i sass -D
   
   // 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
   npm i sass-loader@10 -D
   
   // 安装uview-ui
   npm install uview-ui@2.0.31
  1. 全局引入uview js库main.js
   import uView from "uview-ui";
   Vue.use(uView);
  1. 全局引入uView的全局SCSS主题文件
   /* uni.scss */
   @import 'uview-ui/theme.scss';
  1. 全局引入uview 基础样式
   // 在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性
   <style lang="scss">
   	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
   	@import "uview-ui/index.scss";
   </style>
  1. 配置easycom模式引入uview组件
   // pages.json
   {
   	"easycom": {
   		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   	},
   	// 此为本身已有的内容
   	"pages": [
   		// ......
   	]
   }
  1. 配置vue.config.js文件
   // vue.config.js,如没有此文件则手动创建 放入项目根目录下
   module.exports = {
       transpileDependencies: ['uview-ui']
   }
  1. 使用uview组件
   <u-button type="primary" :disabled="disabled" text="禁用"></u-button>
   <u-button type="primary" loading loadingText="加载中"></u-button>
   <u-button type="primary" icon="map" text="图标按钮"></u-button>
   <u-button type="primary" shape="circle" text="按钮形状"></u-button>
   <u-button type="primary" size="small" text="大小尺寸"></u-button>
  1. 文档参考与bug处理

    官方文档配置参考
    实例项目参考
    注意点 :cnpm 安装会出现包配置错误

2.2 使用uni原生ui插件

  • 安装sass 及 sass-loader
npm i sass -D
npm i sass-loader@10.1.1 -D
  • 安装uni-ui
npm install @dcloudio/uni-ui
  • 使用
<script>
   import  {uniBadge}  from  '@dcloudio/uni-ui'
   export default  {
				components:   {uniBadge}
   }
</script>

2.3 uni-modules

  • 通过 uni_modules(插件模块化规范)单独安装组件,或通过 uni_modules 按需安装某个组件

uniapp开发(由浅到深),小程序,uni-app,rust,开发语言

  • node_modules与uni_modules区别
    uniapp开发(由浅到深),小程序,uni-app,rust,开发语言
  • 具体引入参考

2.4 vuex使用

  • vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。核心概念 State、Getter、Mutation、Action、Module。
    uniapp开发(由浅到深),小程序,uni-app,rust,开发语言
  • 安装
npm install vuex --save 先安装依赖
  • 新建 store/index.js
// 导入 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 以插件形式使用 vuex
Vue.use(Vuex)

// Vuex.Store 构造器选项
const store = new Vuex.Store({
  state: {
    username: 'foo',
    age: 18,
  },
})

export default store
  • main.js 引入
import store from './store';
Vue.config.productionTip = false
Vue.use(uView);
App.mpType = 'app'

const app = new Vue({
  // 把 store 的实例注入所有的子组件
  store,
  ...App
})
app.$mount()
  • 具体使用说明参考 vuex

3.跨平台兼容

3.1 条件编译

  • 不同的平台展示不同特性与功能
  • 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
  • 官网配置参考

#ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
#ifdef:if defined 仅在某平台存在
#ifndef:if not defined 除了某平台均存在
%PLATFORM%:平台名称
uniapp开发(由浅到深),小程序,uni-app,rust,开发语言

  • uni.getSystemInfo 区分AndroidiOS
<template>
	<!-- 条件编译支持样式,支持js与Ui -->
	<view class="content">
		<!-- #ifdef H5 -->
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<!-- 条件编译 -->
		<!-- #endif -->
		<!-- APP-PLUS有 多端用或|| -->
		<!-- #ifndef APP-PLUS || H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			// 方法里面也一样使用
			// #ifdef APP-PLUS 
			// #endif
		switch(uni.getSystemInfoSync().platform){
   case 'android' :
  		console.log('运行在Android上')
  		break;
  case 'ios' :
  		console.log('运行在IOS上')
  		break;
  default :
  		console.log('运行在开发者工具上')
  		break;
  		}	  		

		},
	}
</script>

4.API 使用

4.1 正逆参数传递

  • index.vue
<template>
	<view class="content">
		<navigator url="/pages/home/home?name=admin">跳转</navigator>
		<button @click="hyChange()">事件跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		methods: {
			hyChange() {
				uni.navigateTo({
					url: '/pages/home/home?name=admin&psd=12346678',
					// 触发这个事件成功时的传递参数
					success(res) {
						res.eventChannel.emit('hyPageHome', {
							data: '触发成功跳转传递的事件'
						})
					},
					events: {
						backEvent(data) {
							console.log('逆序参数', data);
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
  • home.vue
<template>
	<view>
		<button type="default">home</button>
		<button type="warn" size="mini" @click="hyIndex">逆向传递</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		// 正向传参
		onLoad(options) {
			console.log('@参数', options);
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('hyPageHome', res => {
				console.log(res);
			})
		},

		methods: {
			// 逆向传参
			hyIndex() {
				uni.navigateBack()
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('backEvent', {
					name: 'admin',
					pad: 'password'
				})
			}
		}
	}
</script>

<style>

</style>

5. 接口封装

  • 参考

6. 多端打包

3.1 微信小程序

3.2 打包App

3.2.1 自有证书-申请
  1. 下载安装jre并配置环境变量 (这里不做配置)
bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre
  1. 使用keytool -genkey命令生成证书

estalias 是后面在hbuilder上要填的 证书别名
test.keystore 是后面在hbuilder上要填的 证书文件
自己输入的密钥库口令 是后面在hbuilder上要填的 证书私钥密码 (比如123456)

uniapp开发(由浅到深),小程序,uni-app,rust,开发语言
3. 查看证书

keytool -list -v -keystore test.keystore
  1. 配置 注意导入的证书文件是test.keystore
3.2.3 离线打包配置

参考官网离线打包配置

参考文章
christian-dong作者写的uniapp 项目实践
Zhou_慧写的接口封装文章来源地址https://www.toymoban.com/news/detail-644255.html

到了这里,关于uniapp开发(由浅到深)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TCP和UDP的由浅到深的详细讲解

    目录 前言 一.TCP 1.1 什么是TCP? 1.2TCP的连接与释放(确认应答机制) 1.2.1三次握手 1.2.2四次挥手 1.3TCP滑动窗口(效率机制) 1.4流量控制(安全机制) 1.5拥塞控制(安全机制) 1.6延迟应答(效率机制) 1.7捎带应答(效率机制) 1.8心跳机制(安全机制) 1.9粘包问题 二.UDP  2.1什么是

    2024年02月07日
    浏览(43)
  • 由浅到深认识Java语言(9):Eclipse IDE简介

    该文章Github地址:https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板(Github仓库地址:https://github.com/AntonyCheng/spring-boot-init-template CSDN文章地址:https://blog.csdn.net/AntonyCheng/article/details/136555245),该模板集成了最常见的开发组件,同时基于修改配置

    2024年03月25日
    浏览(44)
  • Offer必备算法_滑动窗口_八道力扣OJ题详解(由浅到深)

    目录 滑动窗口算法介绍 ①力扣209. 长度最小的子数组 解析及代码 ②力扣3. 无重复字符的最长子串 解析及代码 ③力扣1004. 最大连续1的个数 III 解析及代码 ④力扣1658. 将x减到0的最小操作数 解析及代码 ⑤力扣904. 水果成篮 解析及代码1(使用容器) 解析及代码2(开数组) ⑥

    2024年02月20日
    浏览(47)
  • 【万字解析】JS逆向由浅到深,3个案例由简到难,由练手到项目解析(代码都附详细注释)

    大家好,我是辣条哥! 今天给大家上点难度,不然总觉得辣条哥太菜了!我们今天聊聊JS逆向, 首先JS逆向是指对使用JavaScript编写的代码进行逆向工程,以获取代码的逻辑、算法或者进行修改。 下面举一个简单的例子来说明JS逆向的过程: 假设有一个网站,它使用了JavaScr

    2024年02月15日
    浏览(43)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月05日
    浏览(90)
  • 在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2023年04月15日
    浏览(74)
  • WebStorm开发uni-app ,用vue2实现手机APP(apk) + 微信小程序多端项目开发方案 webstorm开发的uniapp + hbuilderx进行app 小程序打包

    我们主要分析了如下小程序开发框架,主要包括: 框架 技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕ Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕ wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌ mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌  首先,就要排

    2024年02月11日
    浏览(69)
  • uni-app小程序实现音频播放,uniapp播放录音,uniapp简单实现播放录音

    复制到.vue文件即可预览效果 问题 :开发者工具中.onTimeUpdate方法可能会失效! 官方参考:https://uniapp.dcloud.net.cn/api/media/audio-context.html# 其他博客参考:https://blog.csdn.net/weixin_45328705/article/details/114091301 录音实现参考 :https://blog.csdn.net/weixin_43992507/article/details/129857780

    2024年02月12日
    浏览(73)
  • uni-app开发 小程序直播功能

    1、微信后台申请插件开通 2、微信后台开通直播功能 3、代码中接入直播插件AppID 4、【直播组件】如何使用 5、直播组将状态获取 微信开发直播功能,需要企业账号; 需要申请直播功能和插件 1、微信后台申请插件开通 微信后台 登录微信后台 点击设置中的第三方设置 — 添

    2024年02月05日
    浏览(55)
  • uni-app开发小程序以及项目部署流程

    作者也是刚开始接触小程序开发,本次小程序开发使用的uni-app,记录下小程序的开发过程。         作者使用的开发工具:HBuilder x、微信开发者工具。         详细步骤可参考uni-app官网-快速上手,下面简述下作者的使用过程:         1.在HBuilder X 中打开如下路径文件 - 新

    2024年02月09日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包