uniapp学习

睿麒

已于 2023-03-17 11:58:44 修改

阅读量725

点赞数

分类专栏：日常笔记文章标签： uni-app

于 2023-02-16 19:05:29 首次发布

本文链接：https://blog.csdn.net/Ruiqi8/article/details/129053669

版权

日常笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

注意事项
!!! 在uniapp中 js逻辑中 src路径其他路径不能使用@代表绝对路径

uniapp基础 2.1 工程目录结构
在这里插入图片描述

2.3 mainfest.json 应用配置

APPID 小程序一个app 唯一的id账号

在这里插入图片描述

1.3 构建项目基础结构

在这里插入图片描述

自己的项目目录解析

在这里插入图片描述

3.1.1 路由跳转

onPageNotFound() {
			uni.navigateTo(  //    uni.navigateTo 前缀别写错了
			{
				url:'pages/404/404'
			})
		}

uniapp 错误提示
Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
17:43:05.305 语法错误: Unexpected token, expected “,” (22:1)
在这里插入图片描述
解决思路先看看代码是不是错了因为一般打包文件不回错误或者pages。json 是不是错了经过排查是缺少个逗号
加上即可

项目的默认存放路径
在这里插入图片描述

2小程序中传递链接地址时要进行转码和解码
转码 encodeURL 解码 decodeURL

uniapp分包 subPackages 和 page 是同级页面里面的分页要写root 上级目录
在这里插入图片描述
！！！注意分包的根目录要写成绝对目录写相对目录会报错

uniapp 路由跳转的时候记得写绝对地址

！！！uniapp 如何运行到小程序模拟器

先把小程序的地址放到相应的配置页面 ---- 微信开发者工具进入首页 ---- 右上角设置 — 安全 —服务端口打开
详细请参考 https://blog.csdn.net/qq285744011/article/details/124326894

uniapp实战资讯类的网站

uniapp 安装uview 成功的标志

在这里插入图片描述安装之后在全局配置中 main.js 引入uview

配置方式请看文档 npm配置方式
https://v1.uviewui.com/components/npmSetting.html
配置问题配置完后有报错经过排查发现是
在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。时是少些写一个分号 ; 一个都不能少写
在这里插入图片描述

！！！uniapp 项目传参和转码解码

传递参数 encodeURI 不能写错
代码

<swiper-item>
							<navigator :url=" '/pages/webview/webview?url='+ encodeURI('http://baidu.com')">
							<view class="swiper-item ">A</view>
							</navigator>
						</swiper-item>

在这里插入图片描述
接收参数要在 onload 周期中用 options 接收参数然后用 decodeURI进行解码
代码

<view>
		<text>webview</text>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:''
			};
		},
		onLoad(options) {
			console.log('options',options)
			this.url =  decodeURI(options.url)  
		}
	}

在这里插入图片描述
uniapp绑定的点击事件不要把参数写错了一个字母都不能错

绑定方式接收方式
在这里插入图片描述
uniapp 绑定事件的时候要这样事件名要用 " " 包起来

！！！！ uniapp 绑定事件用 @tap 别写成@tab

在这里插入图片描述

！！！！！启动hbuider项目报错 IDE may already started at port xxxx, trying to connect （用hbuider打开微信小程序报错）

！！！解决问题一定要严格按照 — 解决方式的步骤一步一步开
解决方式

1关闭微信开发者工具，然后检查APPID换成自己的APPID   ---- 如何找到自己的appid  打开微信公众平台 -- 登录自己的微信账号 -- 就会看到自己的appid
2先关闭再打开自己的端口号（微信开发者工具——>设置——>安全设置——>安全（服务端口号））
3在HBuilder X的项目>unpackage>dist>dev>project.config.json文件里面添加下面代码，保存运行即可。
"miniprogramRoot": "./unpackage/dist/dev/mp-weixin",
我是这样子通过的 ，可以留言联系我

！！！！项目起不来的原因
关闭微信开发者工具，然后检查APPID换成自己的APPID ---- 如何找到自己的appid 打开微信公众平台 – 登录自己的微信账号 – 就会看到自己的appid ！！！是自己微信在微信公总平台登录申请的appid 一定要切换要不然和自己登录的微信开发者平台连不上
在这里插入图片描述