uni-app
肖肖肖丽珠
学习学习。写博客是为了积累和总结。如果写的有错欢迎大家指正点拨。努力成为技术小牛~~加油
展开
-
uni-app使用canvasToTempFilePath生成的图片很模糊
我是这样在canvas上面的style里面设置宽高是真实地你背景图片的宽高。他画布宽度高度是他的真实宽高除以2.然后输出图片宽度高后面*2.。试的可以解决虚的问题原创 2021-12-07 18:08:31 · 3537 阅读 · 2 评论 -
canvas绘图,绘制圆角矩形。圆角线条。圆形头像
//绘制圆角矩形 //x。x坐标,y,y轴坐标。width宽 height高 radius圆角(一定不能大于height的一半,否则不显示) fillColor填充颜色。borderColor线条颜色 fillRoundRect(cxt, x, y, width, height, radius, fillColor,borderColor) { //圆的直径必然要小于矩形的宽高 if (2 * radius > wi...原创 2021-12-07 18:03:47 · 1970 阅读 · 0 评论 -
uni-app中button改成其他颜色的边框。还是感觉有个黑色的边
这个线就是uni-app本身自带的border,用button::after{ border: none;} 可以去掉原创 2021-11-26 14:57:35 · 1707 阅读 · 0 评论 -
uni-app把网络图片转成本地。
//把网络图片改成本地图片 getNetworkImage(url) { return new Promise((resolve, reject) => { uni.downloadFile({ url, success: (e) => { const ...原创 2021-10-15 22:17:11 · 965 阅读 · 1 评论 -
element-ui中select下拉绑定值为对象时为什么获取的选中的值是错误的
因为我没有写这个属性啊。所以一直获取不到自己选的那个值加上这个属性就行啦<el-select class="teachers" v-model="teachers" filterable placeholder="输入老师姓名筛选" value-key="username"> <el-option v-for="item in mainteacherlis...原创 2021-09-09 15:38:58 · 628 阅读 · 0 评论 -
uni-app微信小程序合成海报并保存到相册
页面有三部分的图片。logo。二维码和背景图。其中背景图是本地的。logo和二维码是接口给的。像这样的海报合成的例子我写过一篇,是在vue的项目中的vue把几张图片logo。二维码。背景合成一个海报并下载,使用canvas但是小程序里面不支持使用var img=new Image(); 他会有这个文章里面的报错。//把网络图片改成本地图片 getNetworkImage(url) { return new P...原创 2021-09-08 20:19:56 · 1500 阅读 · 1 评论 -
2021-09-08小程序本地真机调试都是对的。但是到了线上版本一直报错。 有个图片不出来。downloadFile:fail url not in domain list
线上的小程序点右上角三个点是没有打开调式模式的。你可以现在体验版里面打开调试模式,然后再打开线上版本,就可以看到线上版本的报错了。那为什么我本地的都是好的呢?那是因为我们开发的时候默认勾选了这个,所以没有校验。页面有三部分的图片。logo。二维码和背景图。其中背景图是本地的。logo和二维码是接口给的。像这样的海报合成的例子我写过一篇,是在vue的项目中的vue把几张图片logo。二维码。背景合成一个海报并下载,使用canvas但是小程序里面不支持...原创 2021-09-08 20:05:38 · 1596 阅读 · 0 评论 -
uni-app接口获取的图片转化为本地图片
// 网路图片转化为本地图片的方法。。。。。getNetworkImage(url) { return new Promise((resolve, reject) => { uni.downloadFile({ url, success: (e) => { const p...原创 2021-09-06 17:33:08 · 959 阅读 · 0 评论 -
uni-app的组件命名规则
组件名称小写。原创 2021-07-20 14:14:54 · 1673 阅读 · 0 评论 -
uni-app保存到相册
首先要获取收集相册得访问权限。没有打开要提示去打开。如果打开了权限将图片保存到用的手机上savePoster() { uni.getSetting({ //获取用户的当前设置 success: (res) => { if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册 this.saveImageToPhotosAlbum(); } else { uni.authorize({.原创 2021-07-15 15:41:29 · 325 阅读 · 0 评论 -
uni-app 全局变量
App.vue本身不是页面,这里不能编写视图元素。这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalDataApp.vue 中定义globalData的相关配置:注意不是再data里面写的。<script> export default { globalData: { text: 'text' } } </script>其他页面可以直接使用..原创 2021-07-14 11:49:12 · 1081 阅读 · 0 评论 -
uni-app上拉加载下拉刷新的一个简单例子。
<template> <view> <view v-for="item in list" :key="item.ppkid"> {{item.headline}} </view> <text class="loadMore" v-if="loading">{{!loading && list.length<1?"没有了":"加载中"}}</...原创 2021-07-13 17:48:35 · 501 阅读 · 0 评论 -
封装uni.getUserInfo。每个页面就可以直接使用
getUserinfoFromWx.jsexport default () => { const isSuccess = new Promise((resolve,reject)=>{ uni.getUserInfo({ lang: 'zh_CN', success:(res)=>{ resolve(res) }, fail: () ...原创 2021-07-10 11:59:06 · 674 阅读 · 0 评论 -
uni-app小程序监听左上角的返回按钮。
点击左上角返回按钮回到前一个页面。前一个页面要更新内容。A页面跳转到B,那么B操作了以后,比如下载了,然后回到A页面他的下载数量就会加1.但是常规的点击左上角返回前一个页面并不能更新。B页面onUnload(){ uni.$emit("getlist",{})//这里可以传个空。 }A页面onShow(){ uni.$on("getlist", (e)=>{ this.getwrongtllist();//需要...原创 2021-07-07 16:14:17 · 6554 阅读 · 0 评论 -
vuex使用时避免刷新后保存内容丢失使用session保存,那和session直接保存有什么区别呢?
我们知道vuex保存的内容如果刷新了就会丢失,所以我们在保存的时候利用js存储技术(localStorage、sessionStorage、cookie)来进行处理Vue中使用vuex在页面刷新之后状态不丢失的解决方法但是那和我直接利用js存储技术(localStorage、sessionStorage)有什么区别呢?首先vuex是用在单页面直接通信的,他可以实现实时更新,一旦某个地方修改了其他用到的地方也能马上改变。主要是用来解决组件之间的通讯问题。一个项目都是在store里面定义变量原创 2021-07-07 14:54:32 · 418 阅读 · 0 评论 -
uni-app小程序uni.navigateBack返回上一个页面并传递参数.返回上个页面并刷新
返回上一个打开的页面并传递一个参数。有种办法就是使用var pages = getCurrentPages();let beforePage = pages[pages.length - 2];uni.navigateTo({ url:'/'+beforePage.route+"?id=1"})如果使用uni.navigateBack该怎么传值呢uni.$emit()传值和uni.$on()接收B页面返回A页面B页面:uni.$emit('upda...原创 2021-07-07 11:30:19 · 4491 阅读 · 1 评论 -
uni-app小程序使用u-pase富文本解析图片时会出现闪现一下默认的尺寸再变成设置的宽高,有种先大后小的闪现
全局设置,可以在app.vue里面样式image{height:auto}原创 2021-07-06 16:39:33 · 505 阅读 · 0 评论 -
uni-app小程序video视频点击触发play但是不让他播放而是提示他去购买
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" @play="pay...原创 2021-07-03 11:11:47 · 2002 阅读 · 0 评论 -
uni-app分享海报
uni-app分享,uni.share可以支持分享图片。但是他仅支持app分享小程序里面不能直接分享一个纯图片,是有个path的链接。分享出去的是一个网页。如果想分享图片可以自己下载到相册再去分享。或者是长按图片就会有个分享给好友。三个图分别是,展示页面-点击分享按钮-点击微信主要思路就是:你是把二维码base64的转为二进制文件,然后和背景一起使用canvas绘图。然后你就会获取一个绘图以后的全部图片的链接地址。/...原创 2021-07-01 15:07:52 · 1135 阅读 · 0 评论 -
uni-app把网络图片转为base64的
urlTobase64(img) { return new Promise((resolve, reject) => { wx.downloadFile({ url: img, success(res) { wx.getFileSystemManager().readFile({...原创 2021-06-30 16:14:26 · 1381 阅读 · 0 评论 -
uni-app图片上传到oss。formData的参数为什么没有接收到。获取上传内容的后缀
首先一个接口获取oss的签名。然后把签名和图片的信息通过formdata的格式传到oss上面<view class="wu-example" @click="addImage()"> <view class="btns"> <view class="updateanswerimgbtn" :id="updateanswerimgbtn[question.sortnum]">上传答案</view>...原创 2021-06-30 15:43:27 · 1781 阅读 · 2 评论 -
uni-app隐藏和显示小程序的底部的tabbar
隐藏底部的tabbaruni.hideTabBar()显示底部的tabbaruni.showTabBar()原创 2021-05-15 14:47:37 · 3082 阅读 · 0 评论 -
uni-app怎么让左上角有个小房子的图标点击回到首页
在pages.json里面定义路径和样式的时候一定要去掉这个"navigationStyle" : "custom"(不显示小房子)让"navigationStyle" 使用默认的就可以了。也就是不显示小房子要用"navigationStyle" : "custom",显示的话要去掉这个代码。...原创 2021-05-15 14:38:06 · 5451 阅读 · 1 评论 -
uni-app实现可以滑动的tab标签
这个超简单的就是把tab标签的view写在scroll-view就可以啦 <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" > <block v-for="(item,index) in tabBars" :key="index"> <view class="scroll-ta...原创 2021-04-15 17:11:06 · 1416 阅读 · 0 评论 -
uni-app小程序onLoad里面赋值this.options=options;是浅拷贝,当我this.options改变时。页面传参的options也改变了
onLoad里面赋值this.options=options;是浅拷贝,当我this.options改变时。页面传参的options也改变了通过onLoad(options) { this.options=options; this.options.share="report"; this.options.stuid= "77"; console.log(options);在这里发现打印的内容除了跳转带过...原创 2021-04-15 17:08:17 · 3755 阅读 · 0 评论 -
uni-app把一个页面当做是子组件来用。这个页面既可以单独的显示也可以作为组件用。
遇到的问题:具体就是分享页面,使用了太多的页面,一些是以前得一些页面。如果全部重新浪费时间而且小程序安装包的内存要求一般是2M。重新写肯定浪费内存。所以尽可能得能使用以前得就用以前得页面。作为一个页面的时候,应该是在onLoad里面获取页面的传值。但是作为一个组件,onLoad里面是获取不到值的,因为页面不是跳转,这样的方式:uni.navigateTo({ url: 'test?id=1&name=uniapp'});onLoad(options) { ...原创 2021-04-15 17:06:23 · 2828 阅读 · 0 评论 -
uni-app小程序获取路由的参数,除了onLoad之外的另一个方法
mounted(){ let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 let curParam = routes[routes.length - 1].options; //获取页面的路由后面的参数对象}注意要写在mounted里面原创 2021-04-15 16:33:43 · 1725 阅读 · 0 评论 -
使用一个export default里面定义的函数
如果有个js直接export default{}我们该如何调用呢?getUserinfoFromWx.js里面定义export default () => { let success const isSuccess = new Promise(resolve => success = resolve) uni.getUserInfo({ lang: 'zh_CN', success, fail: () ...原创 2021-04-14 11:51:17 · 2358 阅读 · 0 评论 -
uni-app小程序授权登录
在uni-app授权登录的时候我发现本地测试都没有在开发者工具里面弹窗授权。但是却授权成功,获取到了用户的一些基本信息。发布到了体验版也没问题,因为能够使用体验版的都是小程序设置里面设置成为了体验者的。我就以为没问题了结果上线发现授权失败。真的是研究了好久(因为本地根本无法测试判断问题)。最后终于发现了问题。小程序的授权必须按钮触发,如果你想直接自己访问授权的函数根本是授权不成功的。按钮上一定要加上类型:open-type="getUserInfo" @getuserinfo="..原创 2021-04-14 11:13:21 · 1663 阅读 · 0 评论 -
uni-app小程序点击按钮分享给好友
<button open-type="share" v-bind:data-student="item" class="share"> 分享</button>指定按钮的类型open-type="share"分享需要的信息要使用v-bind:data-student传递,这里student是自己命名。 onShareAppMessage(event) { console.log(e...原创 2021-04-14 11:02:33 · 5484 阅读 · 2 评论 -
uni-app引入的全局的css在预览的时候提示文件没有上传
小程序好像不能打包css文件。如果我们把文件的后缀改成wxss。就能正常的打包上传了。原创 2021-04-13 18:13:37 · 555 阅读 · 0 评论 -
uni-app小程序引入一个公共的css文件的方式。
<stylescopedsrc="../static/css/test.css"></style>我只是在当前页面引入了这个文件并不会影响到其他页面。还有一种方式:@import '../static/css/test.css';但是这样的引入一般放在app.vue里面。他是全局引入的。作用域是全局的。...原创 2021-04-13 18:02:20 · 3246 阅读 · 0 评论 -
uni-app写的小程序的一些思考和问题
1.把一个页面当作组件来使用。不改变原来的获取值得方式也就是即使他是组件也不能使用props来传值。遇到的问题:具体就是分享页面,使用了太多的页面,一些是以前得一些页面。如果全部重新浪费时间而且小程序安装包的内存要求一般是2M。重新写肯定浪费内存。所以尽可能得能使用以前得就用以前得页面。如果把页面当作组件引用得话,他是没有走onload得也就是他不能通过onload获取页面跳转传得参数。解决办法:在跳转之前传一个特殊得参数以此识别这是在分享页。this.options.shar..原创 2021-04-09 15:04:57 · 214 阅读 · 0 评论 -
uni-app新建一个小程序并运行
在点击工具栏里的文件 -> 新建 -> 项目:在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。注意:如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。如下图,需在输入框输入微信开发者工具的安装路径。 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面原创 2021-04-09 11:49:52 · 571 阅读 · 0 评论 -
swiper 滚动模式下的Echarts图展示问题
ecahrt位于swiper里面。在微信开发者工具里查看没什么问题,正常拖拽。但是在手机上看的话,要么时echart没有加载出来。要么时位置不对。感觉是swiper样式导致的,把他放在外面都是好的。最后百度查到:1.canvas 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。2.请勿在 scroll-view、swiper、picker-view、movable-view 中使用 canvas 组件。3. css 动画对 canvas 组件无效。原创 2021-01-13 18:04:42 · 987 阅读 · 0 评论 -
uni-app滚动问题,默认选中第一页看不到的tab的时候怎么让他自己滑动到第一页
再scroll-view标签上加scroll-left然后如果第一次进去显示的是本来看不到的标签,就把这个属性值增加到可以看到的位置<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-left="scrollleft"> <view class="horizonal-tab">这里是tab标签 </view></scroll-view>...原创 2021-01-12 14:20:06 · 583 阅读 · 0 评论 -
uni-app滑动菜单效果.既可以点击也可以滑动切换tab
<template><view class="homepage"> <!-- 顶部导航栏 --> <view class="horizonal-tab"> <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-left="scrollleft"&...原创 2021-01-12 14:14:22 · 4480 阅读 · 0 评论 -
uni-app除了onLoad(option)获取页面的传参外的另一种方法
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组let curRoute = routes[routes.length - 1].route //获取当前页面路由 let curParam = routes[routes.length - 1].options;console.log(curParam)原创 2021-01-07 17:02:00 · 3365 阅读 · 0 评论 -
uni-app小程序新建组件使用的时候报错It‘s not allowed to load an initial chunk on demand. The chunk name “components
报错:It's not allowed to load an initial chunk on demand. The chunk name "components/lalala/lalala" is already used by an entrypoint.我想新建一个组件,因为组件里面如果文件名和vue文件名一样的话我们在其他页面就可以直接使用不用再引入了。所以我点了新建页面的确是出来了一个文件夹名字和vue名字一样的文件。我想在页面引用他。<lalala></lalal原创 2020-12-29 15:16:57 · 6916 阅读 · 0 评论