![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uniapp
佛佛ง
前端
展开
-
uniapp开发的H5网页,嵌入第三方H5,获取用户信息的方式
uniapp开发H5,嵌入第三方H5,并从第三方获取用户信息原创 2022-09-08 20:06:21 · 2392 阅读 · 0 评论 -
uniapp开发的H5网页,以表单形式调起微信H5支付
uniapp开发的H5网页,以表单形式调起微信H5支付原创 2022-09-08 19:44:12 · 1478 阅读 · 0 评论 -
uniapp引入模块化js文件和非模块化js文件
uniapp引入模块化js文件和非模块化js文件原创 2022-09-02 19:49:36 · 14723 阅读 · 3 评论 -
uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off
uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off原创 2022-08-29 13:56:12 · 3214 阅读 · 0 评论 -
微信小程序webview内嵌uniapp H5,H5可以跳转到小程序内的某个指定页面
使用uniapp开发小程序,又使用uniapp开发h5,这时候内部跳转uni.navigateTo可能分不清哪个是哪个,官方给出了解决:1、小程序中使用webview内嵌H5<template> <view style="width: 100%; height: 100%;"> <web-view v-if="url" :src="url"></web-view> </view></template&g..原创 2022-02-09 17:48:51 · 4547 阅读 · 0 评论 -
uniapp 微信小程序内打开腾讯导航路线规划
1、需要在小程序后台管理,添加腾讯位置服务路线规划插件2、详情中看AppId和版本号,后面会用到这两个参数3、申请通过后,参考指南开发4、 在uniapp项目的pages.json中增加插件及开启位置服务"plugins": { "routePlan": { "version": "1.0.19", "provider": "wx50*************" } }, "permission": { "scop..原创 2021-12-21 16:29:13 · 2676 阅读 · 14 评论 -
uniapp 开发的支付宝小程序修改子组件样式无效的解决方法
想要的样式:实际样式:出现原因:我把下面的代码写在了@import 'home.scss';中 /deep/ .title-bar{ height: auto!important; .nav-action{ background: none; .btn-search{ margin: 0; } } }应该直接放在当前页的下面就起作用了<style lang="scss" scope...原创 2021-12-20 11:40:50 · 1794 阅读 · 0 评论 -
支付宝小程序使用redirectTo后switchTab回不到tabbar页面
在A页面使用redirectTo跳转到B页面,在B页面switchTab到home页,发现回不去,但是,如果是navigateTo进来的就可以switchTab,小程序技术支持说【建议非tabbar跳转tabbar页面使用 my.reLaunch 进行跳转;如果非tabbar使用 my.switchTab 可能会出现跳转不了的情况】,换成reLaunch可行my.reLaunch({ url: '/pages/home/home'})...原创 2021-12-17 17:07:38 · 542 阅读 · 0 评论 -
uniapp返回多个节点的信息
let query = uni.createSelectorQuery(); query.select('#bottom').boundingClientRect() query.select('#outer').boundingClientRect() query.exec((res) => { console.log("res[0]",res[0]); console.lo...原创 2021-12-08 19:54:30 · 1500 阅读 · 0 评论 -
uniapp-H5-沉浸式导航的设置
适用场景:H5端的沉浸式导航实现方法:1、page.json中设置导航栏{ "path": "pages/test-11-chenjin/chenjin", "style": { "app-plus": { "titleNView": { "type": "transparent",//导航栏样式。"transparent"-滚动透明渐变 "buttons": [{ type": "share" }] } } }}2原创 2020-12-29 17:02:44 · 1590 阅读 · 0 评论 -
小程序onPullDownRefresh下拉刷新时提高用户体验的技巧
1、在page.json文件中开启下拉刷新设置{ "pages" : [ { "path" : "pages/index/index", "style" : { "enablePullDownRefresh" : true // 开启单页面下拉刷新功能 } } , ... 2、在index.vue页面中监听刷新原创 2020-12-28 18:39:51 · 803 阅读 · 0 评论 -
uniapp-微信小程序、支付宝小程序,地理位置授权与拒绝业务处理
1、用户授权地理位置,则加载用户实时位置信息;用户拒绝,则加载默认的位置信息2、点击地图时,根据用户授权状态,进行业务处理---2.1、已授权,直接进入下一页,展示实时位置信息---2.2、未授权,提示用户,询问是否开启授权--------2.2.1、开启,则调起客户端小程序设置界面,设置是否开启位置,根据用户主动触发的操作,动态设置位置信息,满足第1条的业务需求--------2.2.2、取消,则直接进入下一页,展示默认位置信息原创 2020-08-06 19:47:01 · 1769 阅读 · 0 评论 -
uniapp-iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab
1、在template.h5.html中添加viewport-fit=cover<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">2、在App.vue中引入scss<style lang="scss"> /*每个页面公共css原创 2020-07-22 15:37:51 · 4378 阅读 · 3 评论 -
NoticeBar 通告栏文字不滚动显示
原因1:组件的animationDuration属性值为'0s'导致解决:重新initSize即可1、布局<block v-if="laba.remark"> <uni-notice-bar color="#F85550" ref="notice" :text="laba.remark" showClose="true" single="true" scrollable="true原创 2020-07-14 14:05:56 · 5404 阅读 · 1 评论 -
正则匹配img标签内容追加style样式,给富文本中的图片设置大小和居中显示
关键点:从str中查找出所有的img(用到正则表达式) 为每个img追加style(截取字符串+style) 用新img替换旧的img(replace(旧img,新img))匹配所有的<img ...../>的正则表达式:let r=RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g);源码:// let contents=res.data.data.contentscontents='<p&原创 2020-07-01 17:41:52 · 3798 阅读 · 0 评论 -
mescroll-uni上拉加载不出数据
复现场景:上拉加载,滚动到底,触发了后端请求,也成功返回数据,但是页面静止原因:经排查,页面布局正确,每次触底都请求回了数据,要展示的数据也更新了,但页面没有更新,主要原因是页面没有刷新解决方法:深copy数据详见https://blog.csdn.net/LzzMandy/article/details/107002238...原创 2020-06-29 09:33:01 · 3181 阅读 · 0 评论 -
uniapp使用mescroll-uni只实现下拉刷新,不实现上拉加载
mescroll-uni官网地址:http://www.mescroll.com/uni.html?v=20200315只实现下拉刷新,不实现上拉加载,在data中设置upOption如下:upOption: { use: false}参考代码如下:<template> <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up=.原创 2020-06-28 18:44:41 · 2974 阅读 · 0 评论 -
uniapp使用mescroll-uni实现下拉刷新、上拉加载功能
mescroll-uni官网地址:http://www.mescroll.com/uni.html?v=20200315<template> <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" > <view class="list-one row-shadow"原创 2020-06-28 18:38:06 · 3463 阅读 · 1 评论 -
发布H5时,提示文件查找失败
文件查找失败:'uni-view/components/camera' at ..\..\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni-optimize\.tmp\components.js:37产生原因:调用了不支持该组件的平台解决:1、看一下pages.json页面是否引用错误2、看一下报错的组件条件编译是否错误...原创 2020-05-28 14:14:37 · 9152 阅读 · 0 评论 -
小程序引导页开发
了解一下Markdown的基本语法知识。原创 2020-05-15 17:24:20 · 996 阅读 · 0 评论 -
uniapp引用iconfont矢量图
阿里矢量图网址:https://www.iconfont.cn/1、先创建【我的项目】2、 【选择图标】,【添加入库】,【添加至项目】3、【下载至本地】4、解压之后,把【iconfont.css】文件复制到uniapp的本地项目中5、在步骤3的图中,选择【查看在线链接】6、复制上述代码到【iconfont.css】文件中,整个替换掉【@font-face】部分,并在【//】前追加【https:】,如下所示:7、 在项目中的引用如下,可以使用style设置一..原创 2020-05-14 18:28:08 · 832 阅读 · 0 评论 -
uniapp没有取消按钮的弹框uni.showModal({ content: '没有取消按钮的弹框', showCancel: false,
uni.showModal({ content: '没有取消按钮的弹框', showCancel: false, buttonText: '确定', success: (res) => { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { ...原创 2020-05-13 16:14:30 · 7324 阅读 · 2 评论 -
支付宝小程序-获取会员手机号
实现思路: 目前该功能需要在开发者后台完成敏感信息申请才可以使用此功能,入口为 开发管理 > 功能列表 > 添加功能 > 获取会员手机号 > 用户信息申请 需要将 <button> 组件:open-type 此处设置为 getAuthorize ,用于授权。 scope 此处设置为 phoneNumber ,手机号码。 onGetAuthorize 授权成功回调(在回调里可以调用获取信息的接口)。 onError 授权失败回调(...原创 2020-05-13 13:00:26 · 2726 阅读 · 2 评论 -
微信小程序-获取手机号开发
实现思路:以button组件去调用<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> onLoad时,通过wx.login获取code,传给后端,获取openID和sessionKey method中,通过getPhoneNumber获取encryptedData,iv,组合{encryptedData、iv、sessionKey}请求后台解密获取用户手机号 注意:最后确定你的小程序是否有权限调用ge原创 2020-05-12 15:42:28 · 468 阅读 · 0 评论 -
uniapp中slot插槽的使用
插槽<slot>主要实现分发,当父组件引用带有插槽的子组件时,引用处的子组件内如有内容,当组件渲染的时候,<slot></slot> 将会被替换1、默认插槽的使用:slot-one组件:<template> <view> <view>我是子组件</view> <slot>...原创 2020-04-30 16:15:06 · 16113 阅读 · 0 评论 -
使用uni-ui的uni-swiper-dot组件开发轮播图
<template> <view> <view class="title"> nav导航样式↓ </view> <uni-swiper-dot :info="info" :current="current" :dotsStyles="dotsStyles1" field="content" mode="nav"> <swiper class="swiper-box" @change="change">...原创 2020-04-29 09:58:00 · 1705 阅读 · 0 评论 -
uniapp使用uni-ui插件的方式
1、npm安装参考:https://ext.dcloud.net.cn/plugin?id=552、安装完成后,根目录下出现node_modules,该目录下,是所有的uni-ui组件3、引用的两种方式如下:<template> <view> <uni-badge text="1"></uni-badge> &...原创 2020-04-28 19:22:33 · 6433 阅读 · 0 评论 -
小程序使用uni.createAnimation(OBJECT)实现点赞动画
思路:在页面创建的时候,创建一个临时动画对象 调用 step() 来表示一组动画完成 通过动画实例的export方法导出动画数据传递给组件的animation属性 还原动画 页面卸载的时候,清除动画数据<template> <view class="content"> <view class="item" v-for="(item,ind...原创 2020-04-16 19:02:29 · 4468 阅读 · 0 评论 -
开发中间带有+号和悬浮按钮的底部选项卡
1、新建一个uniapp项目,选择模板2、 创建好之后,用微信开发者工具打开,默认点击【发布】,悬浮框出现,但在实际项目当中,不用每次点击【发布】tab都显示悬浮框,针对上述问题,做如下优化:第一次切换到【发布】tab时,默认不显示悬浮框,页面只显示图标,且背景为白色; 再次点击【发布】时,悬浮框出现,背景变灰色; 点击灰色区域,悬浮框消失 来回点击【发布】,悬浮框显示与隐藏,同...原创 2020-04-14 18:29:28 · 1082 阅读 · 0 评论 -
解决微信公众号tabbar高度不包含在整个页面中,页面数据被覆盖的情况
tabbar的高度 默认是50px,可以在需要调整的页面css中使用条件编译,如下:.home { display: flex; flex-direction: column; height: 100vh; overflow: hidden; /* #ifdef H5 */ padding-bottom: 50px; /* #endi...原创 2020-03-22 01:09:16 · 996 阅读 · 3 评论 -
页面间传值,返回时把值传递给上一页面
1、正向传值:a.vue 跳转到b.vue 页面,a向b传值,可通过跳转时url带参数的形式;如下:uni.navigateTo({ url: 'b?name=uniapp'});b页面在onLoad中通过option来获取传递过来的参数onLoad(option) { this.name=option.name},2、返回传值b.vue返...原创 2020-03-22 01:06:19 · 1780 阅读 · 0 评论 -
支付宝小程序的支付功能开发
步骤:1、获取用户授权2、获取tradeNo3、发起支付// a.3 支付宝支付 // #ifdef MP-ALIPAY _payByAli(payItemObj,paySource) { let that = this; // 下单开始start // 1 获取用户授权 my.getAuthCode({ scopes...原创 2020-03-20 14:55:29 · 1657 阅读 · 1 评论 -
使用uniapp开发微信公众号(H5页面),用微信开发者工具调试微信公众号
1、先引入入口.html文件参见官网https://uniapp.dcloud.io/collocation/manifest?id=h5-template2、配置manifest.json3、运行4、在微信开发者工具中进行公众号网页调试...原创 2020-03-20 14:48:44 · 15573 阅读 · 0 评论 -
给后端发送请求时,传递的参数使用md5加密
const key = 'aaa.bbb.ccc';import md5 from './md5.js';function setRequest(url, data, showLoad = true, method = 'post', header = {}) { if (showLoad) { uni.showLoading({ title: '请等待...' }) }...原创 2020-03-20 14:26:24 · 1709 阅读 · 0 评论 -
小程序7天自动退出
7天自动退出的场景:1、7天没有点击按钮,2、7天没有请求服务器解决思路:1、登录成功,记录当前登录时间,并存在缓存中,2、登录状态下,点击按钮和请求服务器时, a 先判断当前时间和登录时间差是否大于7天, a.1 大于,则清空用户登录缓存信息,提示用户登录, a.2 不大于,则把当前时间作为新的登录时间源码:1、在common.js中统一存、取、清登录...原创 2020-03-20 14:17:39 · 1484 阅读 · 0 评论 -
获取地理位置uni.getLocation(object)
// 开启地图服务for 微信 // #ifdef MP-WEIXIN uni.getSetting({ success: res => { console.log("res.authSetting",res.authSetting); if (res && res.authSetting &...原创 2020-03-02 15:56:30 · 3977 阅读 · 2 评论 -
微信小程序使用getuserinfo获取用户信息
<template> <view> <view>用户昵称:{{nickName?nickName:"没有获取到用户昵称"}}</view> <button type="primary" size="mini" open-type="getUserInfo" @getuserinfo="getuserinfo">获...原创 2020-02-28 15:42:13 · 1490 阅读 · 0 评论 -
小程序的转发/分享功能
方法1、监听页面生命周期 onShareAppMessage- 用户点击右上角分享onShareAppMessage(){ console.log("用户进行了分享") return{ title:"用户进行了分享", path:"pages/news/news", imageUrl:"https://www.baidu.com/img/bd_logo1...原创 2020-02-24 20:54:52 · 1591 阅读 · 0 评论 -
微信小程序中引用的wxs文件在uniapp中不可用的解决方法
在微信小程序中使用的wxs文件相当于执行一段js,对数据进行处理,转到uniapp中可以使用过滤器来解决这个问题。功能:m与km转化,<1000显示 m; >1000显示 km在微信小程序中使用wxs实现方法:1、在utils文件下创建一个transfer.wxs文件// m=km转化:<1000显示m;>1000显示km;var setMorKm = ...原创 2020-02-12 20:32:49 · 2665 阅读 · 0 评论 -
微信小程序uni.downloadFile保存图片到本地相册
<template> <view class="black"> <image class="cover" mode="widthFix" :src="cover" @longpress="operator"></image> </view></template><script> ex...原创 2020-01-29 23:19:24 · 4784 阅读 · 6 评论