uniapp

白鹭88
1,294 阅读8分钟

1、uni-app项目结构

components  uni-app组件目录，放可复用的组件
pages        业务页面文件存放的目录
static       存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
App.vue       应用配置，用来配置App全局样式及监听应用生命周期
main.js       Vue初始化入口文件
mainfest.json   配置应用名称，appid、logo/版本等打包信息
pages.json      配置页面路由、导航条、选项卡等页面类信息
pages.json      配置页面路由、导航条、选项卡等页面类信息

1、小程序更新机制兼容（uni.getUpdateManager()）

全局唯一的版本更新管理对象，用于管理小程序更新。

适合：微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序

不适合：APP、H5

onLaunch: function() {
			//获取小程序更新机制兼容
			if (uni.canIUse('getUpdateManager')) {
				const updateManager = uni.getUpdateManager()
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					if (res.hasUpdate) {
						updateManager.onUpdateReady(function() {
							uni.showModal({
								title: '更新提示',
								content: '新版本已经准备好，是否重启应用？',
								success: function(res) {
									if (res.confirm) {
										// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
										updateManager.applyUpdate()
									}
								}
							})
						})
						updateManager.onUpdateFailed(function() {
							// 新的版本下载失败
							uni.showModal({
								title: '已经有新版本了哟~',
								content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
							})
						})
					}
				})
			} else {
				// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
				uni.showModal({
					title: '提示',
					content: '当前微信版本过低，无法更好体验程序，请升级到最新微信版本后重试。'
				})
			}
		},

2、h5的跨域处理

1、在HbuildX打开网页是没有跨域问题
2、要是在网页中打开会有跨域问题
manifest.json---源码视图
"h5" : {
        "devServer" : {
            "port" : 8090,//前端的端口号跟请求后端的接口
            "disableHostCheck" : true,
            "proxy" : {
                "/zxxxj-api" : {
                    "target" : "http://192.168.*.**:8090",//请求后端的接口
                    "changeOrigin" : true,
                    "pathRewrite":{"^/zxxxj-api":""}
                }
            },
            "https" : false
        }
    }

// 域名 + 'wechat/'
	// httpUrl: 'http://127.0.0.1:8090/',
	// #ifdef H5
	httpUrl:'/zxxxj-api',
	// #endif
	// #ifdef MP-WEIXIN
	httpUrl: 'http://192.168.*.**:8090',
	// #endif
	//接口地址
	interfaceUrl: function() {
		return utils.httpUrl
	},

3、获取随机验证码（随机6位数）

getRandom:function(u){
    let rnd='';
    u=u||6;
    for(var i=0;i<u;i++){
        rnd+=Math.floor(Math.random()*10);
    }
    return rnd;
}

let code=this.getRandom(6)

4.构建网页授权链接

function redirectUrl(url){
    let appid="";//企业的CorpID
    let redirect_url=encodeURLComponent(url);//授权后重定向的回调链接地址
    let response_type="code";；//返回类型，此时固定为：code
    let scope="snsapi_base";//应用授权作用域。企业自建应用固定填写：snsapi_base
    return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect-url}&response_type=
    ${response_type}&scope=${scope}&state=#wechat_redirect`
}

4、ui组件库

gitee.com/echo0927/Th…

5、uCharts高性能跨域图表

地址：ext.dcloud.net.cn/plugin?id=2…

6、前端框架uView UI

gitee.com/xuqu/uView

7、h5分享到朋友圈，朋友

onNavigationBarButtonTap(event) {
			console.log(event)
			const buttonIndex = event.index;
			if (buttonIndex === 0) {
				// 分享 H5 的页面
				const shareProviders = [];
				uni.getProvider({
					service: 'share',
					success: (result) => {
						// 目前仅考虑分享到微信
						if (result.provider && result.provider.length && ~result.provider.indexOf('weixin')) {
							const channels = _handleShareChannels(result.provider);
							uni.showActionSheet({
								itemList: channels.map(channel => {
									return channel.text;
								}),
								success: (result) => {
									const tapIndex = result.tapIndex;
									uni.share({
										provider: 'weixin',
										type: 0,
										title: this.banner.title,
										scene: tapIndex === 0 ? 'WXSceneSession' : 'WXSenceTimeline',
										href: 'https://uniapp.dcloud.io/h5' + DETAIL_PAGE_PATH + '?detailDate=' + JSON.stringify(this.banner),
										imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
									});
								}
							});
						} else {
							uni.showToast({
								title: '未检测到可用的微信分享服务'
							});
						}
					},
					fail: (error) => {
						uni.showToast({
							title: '获取分享服务失败'
						});
					}
				});
			}
		},

8.HBuilderX离线安装插件

windows

  1. 打开资源管理器，进入HBuilderX安装目录
  2. 进入plugins目录
  3. 将插件文件夹, 放置到此目录。（如是zip包，解压即可）
  4. 重启HBuilderX编辑器

Mac

  1. 打开系统终端，输入如下命令，打开HBuilderX插件目录 （注意：mac上，正式版和alpha目录不一样）
  2. 将插件文件夹, 如是zip包，解压即可），放置到plugins目录下
  3. 重启HBuilderX编辑器

正式版命令

复制代码open /Applications/HBuilderX.app/Contents/HBuilderX/plugins/

Alpha版命令

复制代码open /Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/

9.uni-app打包发布h5至服务器流程

  • 第一步
    点击 发行—>
  • 第二
    在这里插入图片描述

网站标题可以根据项目名称定义 ，域名填写天上自己项目部署的域名

  • 在项目中根目录中找到manifest.json文件
    在这里插入图片描述

  • 打包文件生成目录
    在这里插入图片描述
    将h5文件夹拷贝出来丢至服务器部署即可。

10.uni-app H5跨域和发布

开发环境下需要处理跨域问题

找到manifest.json文件打开源码视图新增

    "h5" : {
        "devServer" : {
            "port" : 8000,
            "disableHostCheck" : true,
            "proxy" : {
                "/api" : {
                    "target" : "https://testapi.kemiandan.com",  // 需要跨域的域名
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/api" : ""   //匹配请求路径里面有 /api 替换成 https://testapi.kemiandan.com
                    }
                }
            }
        },
    }
如果h5打包后是直接放在网站的根目录可直接打包，无需配置其他选项
如果你要配置要网站多个子目录需要配置一些参数

例如你的网站域名是testapi.kemiandan.com，然而你想配置在testapi.kemiandan.com/h5/h5目录下
找到manifest.json文件打开源码视图新增

    "h5" : {
        "router" : {
            "mode" : "history",
            "base" : "/h5/h5/"  // 配置引用的正确的文件路径
        },
        "domain" : "https://testapi.kemiandan.com/h5/h5"
    }

然后把打包后的文件放在可访问/h5/h5目录下
访问路径 testapi.kemiandan.com/h5/h5/即可访问

11.input中的placeholder中渲染数据

<input :placeholder="'最低买入'+value+'元'" />

12.miniprogra,-to-uniapp使用指南（各种小程序项目转换为uni-app项目）

工具现在支持npm全局库、HBuilderX插件两种方式使用，任君选择，HBuilderX插件地址：ext.dcloud.net.cn/plugin?id=2…

一、它是谁？

【miniprogram-to-uniapp】转换微信小程序”项目为uni-app项目（新版本工具已经支持各种小程序转换）。

二、它的原理是什么？

最初是学了半节课堆和栈，觉得词法分析挺有意思的，再加上转换小程序插件时，发现这些繁琐的操作完全可以使用程序来完成。
核心是使用Babel获取AST（词法分析)，然后或使用Babel自带函数增删，或正则分析替换等等操作。
可能有的朋友觉得，这种为啥不是纯正则分析？ 纯正则可以解决一部分问题，对于标签与标签内容，其实正则是很难进行区分的哈。

三、它能做哪些事情？

  • 支持微信、QQ、头条/抖音、支付宝/钉钉和百度等小程序转换到 uni-app 项目

  • 支持有/无云开发的小程序项目转换为 uni-app 项目(cloudfunctions 目录将被忽略，uni-app 结合小程序云开发见：使用 uni-app 进行微信小程序云开发经验分享)

  • 支持解析 TypeScript 小程序项目

  • 支持解析使用 npm 模块的小程序项目

  • 支持解析 include 标签

  • 支持解析 template 标签

  • 支持解析 Behavior 文件为 mixins 文件

  • 支持

    .js',

    .wxml 和*.wxss 文件进行相应转换，并做了大量的优化

  • 支持识别 App、Page、Component、VantComponent、Behavior 和纯 Javascript 文件的转换

  • 修复变量名与函数重名的情况

  • 合并使用 require 导入的 wxs 文件

  • setData() polyfill

  • 搜索未在 data 声明，而直接在 setData()里使用的变量，并修复

  • 使用jyf-parser替换 wxParse(感谢网友 “爱瑞巴勒康忙北鼻” 的建议)

  • 因 uni-app 会将所有非 static 目录的资源文件删除，因此将所有资源文件移入 static 目录，并修复所有能修复到的路径(目前 uni 编译时会将非 static 目录的文件复制一份到 static 目录，但并不完全，因此本功能仍保留)

四、它还有哪些不支持转换？

  • 不支持转换反编译后的小程序项目
  • 不支持转换使用 uni-app 编译的小程序项目
  • 不支持转换使用 redux 开发的小程序(代表为：网易云信小程序 DEMO)
  • 不支持转换使用 wxpage 开发的小程序(github.com/tvfe/wxpage)
  • 不支持转换使用腾讯 omi 开发的小程序(github.com/Tencent/omi)
  • 不支持转换小程序抽象节点 componentGenerics
  • 不支持 component 里的 pageLifetimes 生命周期，请手动绕过
  • 不支持使用 js 系统关键字作为函数或变量名(如 default、import、return、switch 等)
  • 不支持以\开头的变量名称，如 `Page({data:{data:{name:"hello"}}})` ，刚好\$data 是 vue 内置变量，so 不支持，需手动修复
  • 不支持以动态绑定的函数<input @input="test{{index+1}}">，需手动修复
  • 更多，请参照miniprogram to uniapp 工具答疑

五、怎么使用？

第一步

在命令行里，运行【 npm install miniprogram-to-uniapp -g 】进行安装，因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装。
如果运行npm报错，请先安装Node.js，下载地址：nodejs.org/zh-cn/

第二步

继续在命令行里，运行【 wtu -V 】，执行结果如下：

显示版本号，说明已经安装成功了。（wtu -> 取自wx to uni之意，后面都用这个全局命令）

第三步

在命令行里，输入【wtu -i "你的小程序项目路径"】
注意 -i 前面和后面都有空格！！！
注意 -i 前面和后面都有空格！！！
注意 -i 前面和后面都有空格！！！
如：【wtu -i "E:\zpWork\Project_self\miniprogram-to-uniapp\test\test-wx-to-uni"】 ，回车后即可以在源项目同及目录得到一个后缀为_uni的目录，即转换成功。

转换前：

转换后：

转换后的项目文件对比（左边是小程序项目，右边是Uni-app项目目录）：

第四步

将转换后的xxx_uni项目导入到hbuilder X，
点击菜单 运行--> 运行到小程序模拟器-->微信开发者工具！（如果是使用了vant的项目，请运行到H5，vant项目转换后仅支持H5和app）
点击菜单 运行--> 运行到小程序模拟器-->微信开发者工具！（如果是使用了vant的项目，请运行到H5，vant项目转换后仅支持H5和app）
点击菜单 运行--> 运行到小程序模拟器-->微信开发者工具！（如果是使用了vant的项目，请运行到H5，vant项目转换后仅支持H5和app）
重要的话说三遍！
然后查看转换后的项目运行到小程序，是否可以正常运行无报错！
(因为这种转换非100%，所以至少需要保证 小程序-->uniapp-->小程序仍然能正常运行，再考虑运行到其他小程序或app)，
如有报错，请根据miniprogram to uniapp 工具答疑 进行修改，保证无报错，然后再运行到其他平台。

工具升级

因为工具更新比较频繁，安装后，可以使用如下命令进行升级：
npm update miniprogram-to-uniapp -g

注意：

  1. 遇到问题请参考文档：miniprogram to uniapp 工具答疑

  2. github上面的只是源代码。 日常使用，"仅"需要运行【 npm install miniprogram-to-uniapp -g 】进行安装才行，无需下载工具源码。

  3. 每次转换时都会将输出目录清空，请注意代码保存。

六、生成图片

uni.showActionSheet({
    itemList:["生成图片"],
    success:(res)=>{
        if(res.tapIndex==0){
            uni.pageScrollTo({
	    scrollTop:0,
	duration:0
	})
	uni.showLoading({
	title:'图片生成中...'
	})
							
	let dom=document.querySelector('#poster')
	html2canvas(dom,{
	    width:dom.clientWidth,
	    height:dom.clientHeight,
	    scrollY:0,
	    scrollX:0,
	    useCORS:true,//跨域
	}).then((canvas)=>{
	    // 返回图片的二进制
	    this.base64=canvas.toDataURL('image/png')
	    uni.hideLoading()
	})
	},
	fail:function(res){
	    this.$util.toast('保存失败')
	}
					}
				})

七、构建网页授权链接

// 构建网页授权链接 
function redirectUri(url){
	let appid="wxfd44454545355";//企业的CorpID
	let redirect_uri=encodeURIComponent(url);//授权后重定向的回调链接地址，请使用urlencode对链接进行处理
	let response_type='code';//返回类型，此时固定为：code
	let scope='snsapi_base';//应用授权作用域。企业自建应用固定填写：snsapi_base
	/**
	 * 假定当前企业CorpID:wxCorpId,根据URL规范，将上述参数分别进行UrlEncode 得到拼接的OAuth2链接
	 * */
	 return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=#wechat_redirect`;
}

七、Vue中filter过滤器的使用方法

vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以在两个地方用：双花括号插值和v-bind表达式

1、在双花括号中
{{message|capitalize}}

2、在v-bind中
<div v-bind:id="rawiID| formatId"></div>

过滤器分为两种

**局部过滤器：**只允许在当前组件中使用

**全局过滤器：**所有组件都可以使用

十、uniapp混合开发中的app直接预览base64会闪退（目前仅h5端可预览64格式）

解决步骤：引入插件,将Base64转为http图片
1、在终端下载：npm i image-tools --save
2、引入import {pathToBase64,base64ToPath} from 'image-tools'
3、
// 处理数据
function handleBase64Img(datalist) {
	return new Promise(resolve => {
			// string类型
			base64ToPath(datalist).then(path => {
				let imgs = [];
				uni.hideLoading()
				imgs[0] = path;
				uni.previewImage({
					current: 0,
					urls: imgs
				});
			})

	})
}

要注意处理异步问题
// 放大图片
previewImage: async function(e) {
	handleBase64Img(e.target.dataset.src)
				
			},

十一、uniapp子组件改变数据时数据没有渲染到视图

首选从父组件传数组给子组件,然后在子组件中选择选项,点击确定后再将选中的数据传回父组件,
但是在子组件里执行点击选择事件时,数据打印出来是已经有更改了,但是页面没有渲染出来(不管
怎么点击,都还是默认的选项);

解决办法:
完成修改之后,再加上this.$forceUpdate(),这个是强制更新数据的操作,不清楚会不会有其它影
响,反正加上去后,就可以正常点击了
avatar
文章
阅读
粉丝