微信小程序
关注
分享
扫一扫
星星之火M
越努力越幸运越优秀
展开
-
微信小程序 – 解决腾讯视频插件—视频只能播放广告问题
已经上线的模块，突然发现视频播放不了，找了很久才定位到问题因为在app.json的window下配置了"renderingMode": "seperated"，当初加这个是为了解决人脸打卡调用相机拍照时一个图层出不来的问题。解决1：直接去掉"renderingMode": "seperated"注意：如果自己项目中有其他模块需要用到"renderingMode": "seperated"，则可看解决2↓解决2：添加"mixedRenderComponents": ["vid.原创 2020-12-28 16:41:15 · 2181 阅读 · 0 评论 -
微信小程序 -- 解决MapContext.getCenterLocation(Object object)没有执行回调问题
今天试了MapContext.getCenterLocation(Object object)，并没有执行成功success/失败fail的回调，很奇怪，之前用过，同样的代码复制过来就不生效了。this.mapCtx = wx.createMapContext("myMap");this.mapCtx.getCenterLocation({ success: function ...原创 2020-04-21 16:09:29 · 3765 阅读 · 4 评论 -
Vue/微信小程序 -- 引入腾讯视频
1. Vue引入腾讯视频2. 微信小程序引入腾讯视频2.1 登录小程序后台：https://mp.weixin.qq.com/，添加“腾讯视频”插件，步骤如下：设置->第三方设置->添加插件搜索“腾讯视频”，选择插件，点击添加即可。添加成功后，点击“详情”查看“腾讯视频”插件信息，复制AppID（wxa75efa648b60994b）和选择一个...原创 2020-03-19 11:33:14 · 4108 阅读 · 3 评论 -
微信小程序 -- 小程序开发、上传代码、提交审核以及要注意的细节
1.小程序开发1.1 新建项目/导入项目打开微信开发者工具，右上角：项目 -- 新建项目，弹出框填写内容，AppID为注册的小程序appId，如果还没注册小程序，可以去“注册”，或者选择“测试号”。如果已有项目，则只需要导入，右上角：项目 -- 导入项目。如下，点击“目录”，导入项目，AppID会自动识别并填写导入的项目AppID，如果没有则需手动填写。1.2 注意事项...原创 2020-01-02 15:41:53 · 12443 阅读 · 1 评论 -
微信小程序 -- 右下角的悬浮效果，实现刷新功能（可拖拽）
如下效果图，右下角有个绿色背景的刷新按钮，这个按钮是悬浮着，可拖拽。这个悬浮效果，我只举例刷新的功能，当然也可以做回到顶部等类似的功能。第一个截图是初始页面加载完的效果，第二个截图是拖拽后的效果，第三个截图是点击3次刷新按钮后的效果。 一.封装组件创建一个组件"movableView"，用于实现刷新功能1.movableView.wxml内容movable-ar...原创 2019-12-19 17:20:25 · 6960 阅读 · 0 评论 -
微信小程序 -- 订阅消息
官方：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html核心代码wx.requestSubscribeMessage({ tmplIds: [''], success (res) { }})调用失败fail返回提示及解决方式：1.er...原创 2019-12-03 09:50:21 · 6980 阅读 · 3 评论 -
微信小程序 -- 插入html代码
对于在微信小程序开发中，插入html代码，有两种做法，具体如下：一.方法1：使用微信小程序组件rich-text1. js文件中content内容为html代码，使用replace() 方法进行字符的替换，达到预期的效果（不需要改，直接复制即可）。Page({ /** * 页面的初始数据 */ data: { content:'', }, /*...原创 2019-10-23 15:27:27 · 10972 阅读 · 0 评论 -
微信小程序 -- 防止事件冒泡
事件分为冒泡事件和非冒泡事件：1）冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。2）非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。1. 在javaScript中，防止事件冒泡的方式阻止事件冒泡（在子级加）：1) return false --加在相应方法最后一行2) e.stopPropagation() --加在相应方法第一行2. ...原创 2019-08-07 12:01:10 · 7609 阅读 · 0 评论 -
微信小程序 -- checkbox、radio改变默认样式
在微信小程序中，checkbox、radio的默认样式如下： 但是有时我们需要改变它的样式，如其他颜色、多项选择为圆圈、单项选择为方框等等。例子如下： 实现如下：1. checkbox样式/* 未选中的 背景样式 */checkbox .wx-checkbox-input { width: 35rpx; /* 背景的宽 */ height: 35rpx; ...原创 2019-08-19 15:01:07 · 3770 阅读 · 2 评论 -
微信小程序 -- checkbox默认选中已有值。
在小程序官网例子中，列表需要多一个参数checked用于控制checkbox的选中（看如下截图）。这样子的话，在项目中，需要对数据列表进行处理，对每条数据都添加一个参数checked，会比较麻烦。因此，为了避免这个问题，我借助了wxs模块。对于wxs模块，可看另一篇博客：https://blog.csdn.net/qq_41638795/article/details/96978347...原创 2019-08-28 15:22:08 · 7214 阅读 · 2 评论 -
微信小程序 -- 自定义组件component并引入。
目前做的小程序项目，根据不同的登录角色，页面显示也有所不同，在wxml页面用了一堆的wx:if来控制显示，最终代码看起来很繁杂。所以就打算组件化，把相同部分封装起来。先简单写一下吧。配置1. 在app.json进行配置在usingComponents里进行配置，自定义组件名：路径"usingComponents": { "lawheader": "./pages/ta...原创 2019-08-30 09:05:59 · 6373 阅读 · 0 评论 -
微信小程序 -- 语音合成：将文字转为语音（插件：微信同声传译）
直接上手吧。1. 小程序后台添加插件：微信同声传译以及在app.json进行配置具体可看另外一篇博客：https://blog.csdn.net/qq_41638795/article/details/980804982. 代码实现页面如下：21. wxml代码如下：<view class="yuyinWrap"> <textarea class...原创 2019-08-29 18:09:50 · 21205 阅读 · 24 评论 -
微信小程序 -- 解决radio、checkbox中的checked赋值问题
在小程序中，radio、checkbox组件的check属性该赋什么值，才能达到选中或者不选中的效果呢？通过上网查到我们可知道，checked="true" 能够选中，checked="false" 还是能够选中，而checked=""才是不选中。至于为什么呢？在官网中（如上截图），我们知道checked的值类型为boolean，而我们所知道，对于“任何非空字符串”转为“boole...原创 2019-09-11 17:36:20 · 14127 阅读 · 4 评论 -
微信小程序 -- 警告：无效的 pageJSON(pages/circle/circle)["window"]。
做微信小程序项目时，看到这个警告，但是被我忽略着。后面事情不多时，就上网查了一下，原来问题是出在circle页面的json文件。页面的json文件内容如下：{ "window": { "navigationBarTitleText": "进度情况" }}查了原因，原来是除了app.json，其他所有页面的.json文件都不需要那个“window”，直接如下即可：...原创 2019-08-07 11:20:35 · 5766 阅读 · 0 评论 -
微信小程序 -- 跳转不到下一页，卡住了（页面栈限制问题）
微信小程序页面栈有10层限制。使用wx.navigateTo()或<navigator open-type="navigateTo"/>组件跳转的页面路径最多只有10层。页面路径大于10层后，再使用就跳转不了了。因此需要合理利用小程序不同跳转方式：1）wx.navigateTo：保留当前页面，跳转到应用内的某个页面；2）wx.redirectTo：关闭当前页面，跳转到应用内的某...原创 2019-08-07 10:41:10 · 2935 阅读 · 0 评论 -
微信小程序 -- 开发遇到的坑（一）重要
最近参与的微信小程序开发中，遇到了一些问题，记录一下。1.cover-view 不支持阿里巴巴矢量图标。如果需要使用到图标，可以选择下载为png格式图片，然后使用cover-image引入。2. map标签里包裹的多个cover-view，进行position定位时，设置z-index无效？我试了多部手机，就iPhone6手机无效。3. 对于某些内容，iPhone6手机显示不出...原创 2019-06-19 09:49:55 · 1079 阅读 · 0 评论 -
微信小程序 -- 项目中会用到的，如预览图片、文件上传到后台实时进度、微信扫一扫、复制文字
1. 预览图片var url = [ 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg'] wx.previewImage({ current: '...原创 2019-07-24 11:53:14 · 1482 阅读 · 0 评论 -
微信小程序 -- canvas：实现圆形进度条
先放效果图，如下：1. wxml文件代码如下对于圆形进度条中间的文字，如果是简单的，可以用它自带的属性去填充。 比较复杂的，就可以像下面，通过样式将文字定位到圆形进度条中间合适位置。<view class='circlePage'> <view class='wrap'> <!-- 圆形中间的文字 --> <view cl...原创 2019-07-19 12:04:44 · 2228 阅读 · 0 评论 -
微信小程序 -- 图片模糊效果
在项目中，要求显示二维码图片列表是模糊的，点击时需输入正确密码才可以显示二维码图片。很简单，只需要在其<image>标签添加如下样式：里面的2px是模糊程度，可按需设置。image{ filter:blur(2px);}效果如下：当然，filter:blur(2px); 样式也适用于html的样式设置。...原创 2019-07-24 16:34:24 · 7599 阅读 · 0 评论 -
微信小程序 -- 返回到前一个页面并调用前一个页面的方法
//返回 back: function (e) { const that = this; const pages = getCurrentPages();//获取页面栈 const beforePage = pages[pages.length - 2]; //前一个页面 wx.navigateBack({ //跳转到前一个页面 success:...原创 2019-07-22 10:44:18 · 4951 阅读 · 0 评论 -
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能，点击选项进行选择，效果是从底部弹出选项框（带滑出动画），选择了某项或者点击其他地方，隐藏（带滑出动画）。效果图如下：可适用于任何场景，如普通选项（如图）或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。1. wxml代码<view class="wrap"> <view bindtap="showModal">...原创 2019-08-01 10:55:26 · 25050 阅读 · 19 评论 -
微信小程序 -- textarea输入时，其框顶在手机输入键盘之上
在微信小程序开发时，textarea进行输入时，会发现其效果如左图，体验感并不是很好。而我们最终需要的效果是如右图，如何实现呢？ 其实很简单，只需给textarea加一个属性即可：cursor-spacing，其值按需设置。<textarea name='remark' placeholder='请输入备注' cursor-spacing="90"...原创 2019-07-31 16:05:42 · 6174 阅读 · 0 评论 -
微信小程序 -- wxs模块：实现类似于vue中的filter过滤器功能
一. vue过滤器在vue中，我们知道有个filter过滤器可以对页面数据进行过滤。如下，先把方法都统一写在一个filters.js文件中，然后在main.js中循环定义全局的过滤器。filters.js//格式化价格exports.formatMoney = function(value){ if(value || value == 0){ value...原创 2019-07-23 16:20:40 · 2373 阅读 · 0 评论 -
微信小程序 -- 收集推送码formId
为了获取尽可能多的推送码formId，所以可以在访问比较多的页面中去获取。在每个页面中，点击比较多的button按钮、input框等等都可以去设置获取推送码formId。1. 在wxml中，模版如下，注意：1）给form设置属性：report-submit="true" ；2） button 的“formid_button”类，把button样式改透明，在全局app.wxss里写...原创 2019-08-01 17:04:57 · 1611 阅读 · 0 评论 -
微信小程序 -- 获取语音，并将语音转为文字（插件：微信同声传译）
实现的功能是获取语音，并将语音转为文字，实现效果如下： 1. 小程序后台添加插件：微信同声传译登录小程序后台：https://mp.weixin.qq.com 11. 设置 -> 第三方设置 -> 添加插件12. 输入“微信同声传译”，点击搜索，之后选择并点击添加13. 成功添加后，点击详情14. 复制它的Ap...原创 2019-08-02 16:57:34 · 31326 阅读 · 47 评论 -
微信小程序 -- 去掉scroll-view滚动条（测试有效）
细节很重要，如下加下划线的注意点要记住了。去掉scroll-view的滚动条其实很简单，只需要添加以下样式：scroll-view ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none;}但是需要注意的是，如果只是如下写法，可能只能把scroll-view滚动条由...原创 2019-08-02 09:56:05 · 7502 阅读 · 15 评论 -
微信小程序 -- 小程序加载时必要的两件事：监听网络状态和小程序版本更新
监听网络状态和小程序版本更新两个方法写在app.js中的onLaunch中，并同时去调用两个方法。具体如下：onLaunch: function () { this.networkManage(); //调用监听网络状态的方法 this.updateManage(); //调用检测小程序版本更新的方法 // ---------------------------------...原创 2019-08-02 11:00:52 · 4574 阅读 · 1 评论 -
微信小程序实战 -- map：根据百度地图的api来获取地址信息
先附上实现效果： 实现的功能有：（中间“红色图标”所在位置为选择的定位）1. 拖动地图，进行定位；2. 根据输入的内容进行地图定位。一. 申请秘钥ak ，下载百度地图微信小程序JavaScript API1. 百度地图开放平台申请ak：http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5注册 -> 登录 ...原创 2019-05-28 17:27:42 · 6104 阅读 · 8 评论