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组件库
5、uCharts高性能跨域图表
地址:ext.dcloud.net.cn/plugin?id=2…
6、前端框架uView UI
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
- 打开资源管理器,进入HBuilderX安装目录
- 进入
plugins
目录 - 将插件文件夹, 放置到此目录。(如是zip包,解压即可)
- 重启HBuilderX编辑器
Mac
- 打开系统终端,输入如下命令,打开HBuilderX插件目录 (注意:mac上,正式版和alpha目录不一样)
- 将插件文件夹, 如是zip包,解压即可),放置到
plugins
目录下 - 重启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
注意:
-
遇到问题请参考文档:miniprogram to uniapp 工具答疑
-
github上面的只是源代码。 日常使用,"仅"需要运行【 npm install miniprogram-to-uniapp -g 】进行安装才行,无需下载工具源码。
-
每次转换时都会将输出目录清空,请注意代码保存。
六、生成图片
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(),这个是强制更新数据的操作,不清楚会不会有其它影
响,反正加上去后,就可以正常点击了