微信小程序里碰到的坑和小知识】的更多相关文章

本文作者:dongtao   来自:授权地址 本人低级程序员,以下bug不能确保在其它地方可以以相同的原因复现.同时, 出现很多bug的原因是小程序的基本知识还有编码的基本功不到位造成 路还很长,共勉 目录 资源 (资源加载时候会出现的问题) API (api在使用中有可能会碰到) 工具 (模拟器和真机调试有可能出现的问题) 兼容 (在真机上调试时候有可能出现的问题) 资源篇 已解决在app.wxss里设置了图片路径,在IDE里正常无误,但是在手机上是没有显示的,解决办法:(这段话位置放那么偏~…
1.执行npm初始化指令 小程序根目录,命令执行如下指令: npm init 执行后会让加载项目初始信息,具体截图如下: 2.执行安装npm包指令 在这我们举个例子,以接入友盟统计SDK为例,执行命令如下: npm install umtrack-wx --save 说明截图: 执行截图如下: 3.微信开发者工具构建npm 点击微信开发者工具中的菜单栏:工具 --> 构建 npm 点击构建之后,项目会自动帮我们进行构建,然后会多出一个miniprogram_npm文件夹: 4.勾选"使用…
纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = util.aliOssParams();//主要是获取上传阿里云的加密策略policy和签名signature;以及上传自己要上传到阿里云的地址,当然还有自己阿里云accessid. //上传视频到阿里云 var that = this; wx.chooseVideo({ maxDuration:…
微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开发模式确实方便很多,它的语法 Vue 的语法很像,可以实现组件化开发,方面后面代码的调整和维护...但是!!这个框架的坑也不是一点点,开发的时候总会遇到奇奇怪怪的问题,自己去踩吧,这样你才能进步~~ 废话了这么多,咳咳,上面的都不是我们要讨论的重点,我们今天的重点是—在小程序里使用 Redux 进行…
现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧.  我们自己之前做公众号发红包,做了两三年了,然后后面小程序火了,开始做小程序发红包,在开发过程中也遇到一些坑.下面我们给大家分享下我们如何解决的. 小程序如何发红包.直接上来先说跳坑方法吧,没耐心的,可以直接看完我这段就赶紧去改你的代码就行了,有耐心的,或者你可能除了这个坑以外,还有其他的坑的,那你就仔细看完我后面分析的内容. 小程序发…
在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小程序也加上这两个功能呢? 我们知道在 vue 里是通过 Object.defineProperty 来实现数据变化检测的,给该变量的 setter 里注入所有的绑定操作,就可以在该变量变化时带动其它数据的变化.那么是不是可以把这种方法运用在小程序上呢? 实际上,在小程序里实现要比 vue 里简单,应…
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class="marquee_container" style="--marqueeWidth--:-12em">   <view class="bulletin_box_img2">     <image src="../../ima…
问题: 在小程序开发中如果有那么个场景和操作步骤,获取商品下拉列表商品列表data为goodsList 当从后台获取数据response.data.list,通常我们会setData({goodsList:response.data.list}) 下拉获取到第二页数据,添加goodsList里来,再次setData一次goodsList(是的小程序直接添加进当前数组,再次setData就能渲染出来,不用生成新数组,这里不用vue3.0之前把呢不能和react那样), const goodObje…
之前开发过类似得需求,也踩了一些小坑,在这里和大家分享下,毕竟这样的需求也不在少数,基本上产品后期都会有这样的需求: 官方说明 因为需要用户主动触发才能打开 APP,所以该功能不由 API 来调用,需要用 open-type 的值设置为 launchApp 的 <button> 组件的点击来触发. 另外一个条件 当小程序从 APP 分享消息卡片的场景打开(场景值 1036),小程序才会获得打开 APP 的能力,此时用户点击按钮可以打开分享该卡片的 APP.即小程序不能打开任意 APP,只能 跳…
卖货小店小程序,不用开发一行代码也能帮商家实现交易功能,这个真是几家欢喜几家愁啊,对于开发小程序商城的公司来说,这个无疑是一个雷霆之际,第一反应就是,这下完了,小程序自身就支持交易,那还要我们这些第三方公司做什么,好像是没有一点关系了吧. 本文由百牛信息技术bainiu.ltd整理发布于博客园. 为了帮助商家在微信内快速开店,方便商家和用户之间沟通,所有认证公众号,可快速创建微信小店小程序.具体来说,原有微信小店功能的公众号,可以一键升级为小店小程序,所有认证公众号均可在“添加功能插件”里申请小…
小程序里的自定义组件里是有数据监听器的,可以监听对应数据的变化来执行callBack,但是页面Page里没有对应的api就显的很生硬,比如某个数据变了(如切换城市)需要重新刷页面,如果不做监听,每次都要在数据变化的地方手动去调一次函数. 那么如何像vue那样在Page里实现 watch 和 computed 呢 ?如果这时候你脑子里能想到 Obejct.defineProperty 或者 Proxy 那么接下来就慢慢实现吧. 先晒出是这样调用的,请牢记这个调用,后面会反复提到 test2 tes…
记一个小程序踩过的坑 小程序项目中app.js里面定义了globalData,即全局变量,里面定义了一个token字段 需求是这样的,每次进入小程序的时候需要检验该token有没有,没有就请求后台获取token,由于我一开始将该检验函数A放在onLaunch事件里面,但是这个函数A是引入的其他js文件里面的,这时候我在这个js文件里面使用const app = getApp()的时候发现获取的是undefined, 后来查到原来onLaunch事件只是小程序刚好初始化完成之后的回调函数,这个时候…
开发小程序所需的基本技能   关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发. 关于还没有接触过小程序的开发者来说,最关心的问题无非就是,开发小程序,我需要掌握哪些技能?   从我学习小程序的经验中得出,开发小程序的基本要求: 如果你是一名已经工作1年以上的前端工程师,你几乎不用学习任何新的东西就可以快速上手: 如果你是一名刚刚大学毕业的大学生,你需要熟练使用HTML.CSS.JS: 如果你是一名没有任何基础的小程序爱好者,我建议你先去系统…
本文转自:http://www.cnblogs.com/rennix/p/6287432.html 开发小程序所需的基本技能   关于小程序的介绍和使用场景这里不作介绍,这个系列的文章会一步一步地带领大家快速地学习和掌握小程序的开发. 关于还没有接触过小程序的开发者来说,最关心的问题无非就是,开发小程序,我需要掌握哪些技能?   从我学习小程序的经验中得出,开发小程序的基本要求: 如果你是一名已经工作1年以上的前端工程师,你几乎不用学习任何新的东西就可以快速上手: 如果你是一名刚刚大学毕业的大学…
小程序也做了几个小功能模块了,总觉得需要总结一下,踩坑什么的还是得记录一下啊. 好吧,其实是为了方便回顾 首先,说到小程序框架,大家都知道wepy,不过,我是没用过 美团开发团队到mpvue到是个实在到东西,因为自己之前用到vue,所以上手可以说是难度很低 坑可以说还是很多的,下面说说我自己遇到的,当然是想到哪写到哪了,见谅,哈哈 一 filter 首先vue支持的filter,过滤器,mpvue明确说明了不支持,不支持,不支持 所以,一些数据需要在methods里面直接重构一下数据,然后再赋值…
类似微信聊天小程序-网易云信,IM DEMO小程序版本 代码地址: https://github.com/netease-im/NIM_Web_Weapp_Demo 云信IM DEMO 小程序版本 (以下简称小程序 demo),是一套使用网易云信IM端SDK,基于微信小程序原生开发方式开发的一款类似于微信的聊天小程序. 小程序DEMO的推出,使得云信SDK的开发者们可以更便捷的借助微信渠道推广他们的产品.主要功能点如下: 登录注册(为了实现不同端同一账号体系,所以没有采用微信授权登录) 最近会话…
1. 进入小程序后台 - 设置 - 开发设置 2. 添加业务域名(小程序只支持https) 3. 小程序代码 <web-view src="网址"></web-view>…
就在刚刚,小程序上线两个新能力——小程序支持打开APP了,小程序的标题栏区域开放自定义.用户可以在小程序里更方便地获取到APP的服务了——APP链接分享到微信,打开小程序页面后,用户从该小程序页面里,也能支持打开APP.现在,开发者可以设置小程序菜单栏颜色深浅的风格,同时也可以根据小程序自身的风格,对小程序菜单外的标题栏区域进行自定义调整和设计. 这俩能力到底是怎样的,各位请往下看. 一键跳转,就现在 去年,微信团队开放了“APP链接分享到微信,点开就是小程序”等能力.现在,小程序和APP又有了…
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小程序是企业主体,支付宝 web-view 组件不对个人类型的小程序开放. 2. 您需要有一个自己的域名,在嵌入网页的时候需要在支付宝后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开…
阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序页面源码,具体如下页面)本推文的项目的SSM框架的,当然还有SpringBoot的框架,大家根据需要自行获取哈. SSM的框架使用myBatis做数据处理,我用的是它的自动生成,一个数据库表用于存储.上传流畅,图片文件是保存在本地服务器上,后期有空再上传一个保存到指定ftp服务器上的,大家修改一些配置即可,类…
小程序开放激励视频是对小程序开发者一个福音,小程序开发者可以完成一些变现,以增加收入! 本文章针对已经有开发经验或者正在进行小程序开发的同学~ 官方文档:激励视频广告 定义页面变量,用于创建视频实例 const = { videoAd: null } 创建广告视频 /** * @method createVideoAd 创建广告视频 */ createVideoAd() { // 创建广告位 if (wx.createRewardedVideoAd) { // 加载激励视频广告 this.con…
https://www.cnblogs.com/shunxing/articles/6971648.html input里的value会在浮层上面的,要解决这一问题还是很简单的,在小程序中input有个placeholder-class属性,我们只要写一个类,规定它的z-index:1只要比浮层权重低就行了,然后使用placeholder-class属性绑定这个类就行了,不过在使用过程中可能还会遇到别的问题,大家可与加我与我讨论,还有input标签无法设置 font-family:这些大家都要主…
第一个坑:wx.showModal(OBJECT) wx.showModal在安卓手机里,如果点击遮罩的话会关闭弹窗,不会有任何回调.而苹果的情况下则是点击遮罩不会有任何反应. 这样会有什么问题呢? 比如我有一个A界面是登录后才能访问的,在进入A界面后如果发现并没有登录的话则会弹窗要求再次授权,这时取消返回首页,确定再次授权,授权后访问A界面. 那么问题来了,如果我点击了遮罩没有任何回调的话则停留在了一个白屏的A界面…… 查了查官方有很多人有反应过这个安卓和苹果的区别.但是官方的回复是设计如此……
微信小程序hidden转换后执行play()用真机测试不会播放.在调试器里可以. 解决方法,把hidden换成wx:if. 我刚开始以为网速问题,其实不是, 具体我也不知道为什,换上wxif解决了.…
之前由于不了解微信小程序的整个的运行开发机制,走了很多的弯路,脑子灵光的可能不会遇到,这个主题系列的帖子希望可以帮助到像我一样理解能力慢的孩子. 不论是开发微信小程序还是说学习任何一门编程语言,最重要的一点是要夯实基础,不是只是去看看概念,从hello word开始就要好好的去对待每一行代码,软工是工科,工科就要多动手,每一位走的长远的程序员都不会缺少匠心精神. 1.Q:一个appid只能创建一个小程序项目吗?我写毁了怎么办?我把小程序开发者工具自动创建的快速启动模板不小心删掉了怎么办?? A:…
登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 iconfont.css 文件,直接复制出来粘贴在微信小程序的wxss 文件内 再在小程序的wxml 里引用类 2)转换成base64的文件 在线转换 (https://transfonter.org/) 先找到下载的源码中的 iconfont.ttf 文件,导入 后续引用与1类似…
原文地址: http://fanjiajia.cn/2018/06/27/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E2%80%94setTimeOut%E5%AE%9A%E6%97%B6%E5%99%A8%E7%9A%84%E5%9D%91/ 背景 实验室需要将项目的app搬到微信的小程序上,终于知道为什么程序员是手艺人了,只要有需求,就要想方设法去填充这种需求,去年是小程序的元年了可以说,去年冬天一个叫跳一跳的小程序游戏出现在我的微信中,当时…
1.小程序都报wxss编译错误 解决方法: 在控制台输入openVendor() ,清除里面的wcsc wcsc.exe 然后重启工具 2.微信小程序wx:for警告 Now you can provide attr "wx:key" for a "wx:for" to improve performance. 上文为警告,不处理不影响程序运行. 在wx:for后面添加wx:key="key" 可消除警告. 3.引入外部字体 先外部字体准备好. …
进入微信小程序,点击开发->选择消息推送->扫码授权,填写必要参数 进入接口开发: /// <summary> /// 验证小程序 /// </summary> /// <returns></returns> [HttpGet("checksign")] public dynamic CheckSignature() { /// 1.将token.timestamp.nonce三个参数进行字典序排序 /// 2.将三个参数字符…
好久没动小程序了,今天打算复习复习,结果刚写了一个scroll-view就遇到了一个坑,这怎么能忍,对比看文档也没发现那里出了问题,没办法只能去翻翻微信给的demo,发现scroll-view一个必要属性和两个必要样式,缺其一就无法完成scroll-view. 1.水平滑动的scroll-view 水平滑动的scroll-view,需要给scroll-view一个固定的宽度,设置属性scroll-x,并且设置样式white-space:nowrap;(这个很重要,不设置这个样式,无法完成scro…