zxh7770的博客

uniapp用uParse实现解析后台的富文本编辑器的内容及修改uParse样式

有些场景我们需要从A页面带着参数到B页面，然后再B页面去修改A页面的这个参数。如果是uniapp封装的app，需要安装uniapp内置的调试器。

vue对象如何传变量进行取值阐述在开发的过程中，在使用key取值的时候，key 不一定要是一个固定的，也有可能是一个变量。案例代码如下：let key1 = 'name';let objectList = { 'id': '1', [key1]: '李四'};console.log(objectList['id']) // "1"console.log(objectList[key1]) // "李四"console.log(objectList.id) // '1'根据k

uniapp H5 项目 播放 m3u8格式视频阐述在项目中，可能会获取一些直播流地址，比如最常见的就是.m3u8视频格式。在小程序可以直接使用video 标签就可以直接播放，因为小程序有自己的引擎，可以直接使用。H5页面是运行在浏览器上面的，不能直接播放。解决方案安装以下依赖Dplayer.js、hls.jsnpm i dplayer -S npm i hls.js -Sps：如果版本太高了，可以指定以下版本安装即可。指定 Dplayer.js、hls.js 版本{ "depe

阐述：在使用uniapp打包发布项目的时候，H5页面有区别于小程序，小程序一般直接运行到微信开发者工具的，从微信开发者工具进行发布。下面说下H5打包的时候会出现的一些问题。可能会出现以下问题直接打开index.html是空白页，没有数据。css、image的src图片路径不正确，图片丢失。1、直接打开index.html是空白页，没有数据，解决方案如下：选择H5配置，把以下图片中的，运行的基础路径改为 ./ , 路由模式选择：history2、css、image的src图片路径不正确，图

阐述在微信小程序开发中，我们都有可能使用到地理位置获取，获取经纬度。便于我们计算用户与商家两者之间的距离。解决方案如下：1、微信小程序获取地理位置授权，首先需要在app.json中添加配置："permission": { "scope.userLocation": { "desc": "请确认授权" } }2、获取经纬度PS：如果手机未开启位置信息，那么授权成功后在wx.getLocation()方法中也会一直失败，所以需要在fail方法中提示用户开启手机位置信息getU

微信小程序第一次提交审核之 用户隐私保护指引设置微信小程序新规，提交的时候需要填写这个 用户隐私保护指引设置。填写方式如下图：参考图片如下：

一、js直接调用wx.getSystemInfoSyncPage({ data: { isIPhoneX:false, }, onLoad: function () { this.setData({ "isIphoneX": this.isIphoneX() }) }, isIphoneX() { let res = wx.getSystemInfoSync(); if (res.screenHeight == 812 || res.sc

uniapp小程序运行正常，app运行报cid unmatched at view.umd.min.js阐述uniapp 运行小程序正常，但是调试App。有时候就会报一大堆错误，是因为小程序编辑器内部做了很强大的兼容性。错误截图如下：报错原因uniapp有着强大的 easycom 只要是符合规范，则不需要引入、注册组件。但是项目越来越大，涉及到分包，也有些子组件需要使用。使用子组件就得注册了。注册成功以后在小程序上面运行没有问题，在App调试器上面就报错了。原因如下：目录结构如下：

uniapp监测网络uni.onNetworkStatusChange & uni.getNetworkType的使用区别阐述：在实际项目开发中，难免会监测网络，下面来具体详解下小程序这两种监测网络的方法，各有什么不同以及如何配合使用。这里配置的是 uniapp，微信小程序把 uni. 换成 wx. 即可。uni.onNetworkStatusChange和 uni.getNetworkType的区别如下：1、uni.onNetworkStatusChange：uni.onNet

微信小程序 使用navigateTo跳转url传递对象阐述在使用 “uni.navigateTo” 跳转的时候，如果要不是对象的方式传递，则会在url上面拼接太多的参数了。不易阅读。我这里用的是uniapp，微信小程序也一样。使用navigateTo跳转进行参数传递let confirmData = { specificationID: this.specificationLists[this.specificationIndex].ID, Price: this.specificatio

uniapp踩坑之修改组件默认样式阐述：最近刚开始使用uniapp开发，有些组件渲染之后会生成一些标签，我需要修改生成标签的样式。比如< uni-combox >、< uni-number-box > 等组件，我觉得它们都太大了，需要重新自定义样式。网上关于如何修改uniapp组件的操作。这种方式不是不可以，但是针对的平台不同，针对的客户端也不同。这些方式也许在H5页面上就可以，在小程序上面就不可以。大家多试试看。有的说style标签上不加scoped，就可以

uniapp使用scroll-view实现左右，上下滑动阐述我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求，不需要安装better-scroll uniapp 自带的scroll-view 就可以实现了。实现左右滑动<view class="model_scrollx flex_row"> <scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'"> <view

阐述：flex布局采用justify-content:space-between,当为两个内容时中间被空出给外层容器加一个伪类::after,设置样式content:""; width:“内容宽”上述图片问题解决方案如下：<view class="goods"> <view v-for="(item) in 9"> <win-goods></win-goods> </view></view>.goods {

小程序上传图片报uploadFile:fail parameter error: parameter.filePat…parameter.name should be String instead of Array；阐述：原因是上传的name是一个array类型，而不是String。解决方案如下：注意：以下是本人封装的一个微信上传的函数，直接调用即可，调用方式写在下方。把微信上传封装函数：function uploadFileServer(url, filePath, name,

阐述一开始网上搜索，只能在app.json中的window里面设置 “navigationStyle”: “custom” ，这样小程序所有页面都没有导航栏了，只保留右上角胶囊按钮，后来经过自己网上查阅资料。在单页面也可以设置。注意：iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持全局设置导航栏，隐藏app.json设置 – “navigationStyle”: “custom”PS：从app.json中设置所有页面都会生效，导航消失。"wind

阐述有时候项目的需求是点击页面，然后携带参数并返回到上一个页面，比如说，用户选择收货地址，点击完收货地址，然后自动带着选择的收货地址返回上一个页面。如下图：实现方式的代码如下：一、使用“wx.navigateBack”进行返回上一级页面操作。子页面代码如下（地址页面）代码如下：selectAddress(e){ console.log('选择了自提地址',e,oneselfAddress) let oneselfAddress = e.currentTarget.datas

问题描述在使用小程序wx.getLocation获取定位的时候，如出现下图问题。需要在app.json中添加一段代码即可。在app.json中添加代码如下："permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }...

微信小程序使用wx.getLocation获取定位，点击取消后打开手机设置，重新获取定位阐述在某些场景下，我们需要使用微信小程序获取定位信息，比如说小编这个打卡的功能，在用户每次打卡的时候都需要获取用户的位置。如果用户不在位置范围，则打卡失败。实现办法如下：1，调用微信小程序的wx.getLocation，获取用户位置2，使用wx.openSetting重新唤起手机设置，获取定位PS：如果用户点击取消的情况下才会使用wx.openSetting次组件一、调用微信小程序的wx.getL

小程序销毁页面的方法阐述：在使用页面跳转的时候，往往是需要销毁上一个页面的，那么就需要用到生命周期函数onUnload了。一、具体使用方法如下：1.1，注意以下几点：要想触发销毁页面onUnload生命周期执行方法，必须要使用不存在页面栈的路由。比如：wx.reLaunch、wx.redirectTo、wx.navigateBack不能使用wx.navigateTo，因为此路由是可以保存页面栈的，也就是并没有销毁页面，而是叠加页面栈，最多可以叠加5层。1.2，小程序销毁页面之前调用的方法

我在小程序中使用dialog的时候，确认按钮和取消按钮不对称样式问题如下：看到确认跟取消按钮不对称解决办法如下1，检查小程序app.json 将 “style”：“v2”配置去掉即可修改好的如下

阐述：有些项目并不想让小程序的导航的颜色是纯色的，想要更换颜色。那么就用到的“navigationBarBackgroundColor”这个参数，具体看下以下设置方法设置导航栏颜色有时候我们在单页面设置的“navigationBarBackgroundColor”不好用， 那么就要检查以下app.json下面有没有设置过，如果有删除，则在单页面下面的json文件中重新定义即可。全局设置app.json配置文件，在跟目录下"window": { "backgroundTextSt

阐述项目中使用vantWeapp的组件，但是要用到组件中的“Dialog 弹出框”，提示确认取消等操作，但是发现每个页面都需要引用一样的代码，代码冗余量太大，想着就把它抽离到类里面，这样直接调用即可。下面看下具体的抽离过程以及遇到的坑！一、提示类的代码1，GetErrorMessageimport Dialog from '../miniprogram_npm/@vant/weapp/di...

阐述最近在公司做微信小程序，退出的时候可以正常退出，但是用手机的物理返回键的时候还能继续返回到上一个页面，这样就相当于没有退出，以下说下我的解决方法。解决方案如下1，要使用微信的“redirectTo”来进行跳转，不能使用”navigateTo“，来进行跳转到登录页面。代码如下wx.redirectTo({ url: '/pages/login/login'})官方解释：wx....

小程序picker使用注意：小程序的picker，更好的处理的select事件以及应对深层次的多级联动，对于单选的picker，最简单的就是选择数据和要展示的一 一对象，这样我们可以直接使用数据。展示的数据picker的数据图如下：使用流程代码如下1，wxml代码 <picker name="idCard" class="selectPicker" bindchange=...

微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法1，搭建小程序1.1 项目 - 新建项目 - 如下图所示：1.2点击图中“新建”即可创建成功小程序项目。2，安装vant- weapp库2.0 - 在安装vant- weapp之前我们需要先初始化npm，然后在安装vant- weapp；2.1 - 使用cmd命令行进入项目根目录，在项目根目录下面初始化npm...