- 小程序 vtabs组件滑动跳转混乱?
使用官方提供的vtabs 示例中的代码,开发垂直滑动选项卡。 右侧内容项中的高度是根据内容的大小随机设定的,然后就会出现选项卡切换混乱的问题,当给右侧内容项设定固定高度时,又没有问题。 请问存在什么bug呢?
2020-10-14 - 微信小程序前端开发踩坑——引入weui组件库
前言 今天在写微信小程序前端页面,想引入weui组件库来完成开发。结果按着官方文档来遇到了一堆问题,最后靠着不断百度查资料才最终解决。所以将过程记录一下,避免后面再遇到这类坑。 注意:本文默认读者已知道怎么使用npm 1. 初始化 以管理员身份运行命令行窗口(cmd),在cmd中进入项目的根目录。然后输入以下命令: [代码]npm init [代码] 后面一路按回车健即可,最终会在项目的根目录中创建出一个名为package.json的文件。 2. 安装weui组件库 在cmd中紧接着输入以下命令: [代码]npm install weui-miniprogram [代码] 命令执行完毕后会多出来一个node_modules文件夹,里面包含了weui组件库。 3. 构建npm 在微信开发者工具中,选择“工具”->“构建npm”。如无意外会出现类似“没有找到可以构建的NPM包……”这样的报错。 这时就需要在项目根目录找到package.config.json文件,修改相关的配置如下: [代码]{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] } } [代码] 继续在开发者工具中的“详情”->“本地设置”里检查是否勾选上“使用npm模块”选项,若没勾选则勾选上。 完成上述配置后,重新构建npm,即可构建完成。 4. 重启项目 在开发者工具中“项目”->“重新打开此项目”,完成对项目的重启。 注意:这一步非常重要!!!否则引入组件会提示找不到文件!!! 5. 引入wxss 在app.wxss中,引入weui库的wxss文件 [代码]@import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; [代码] 引入时要根据实际情况调整路径,但最长后缀均为 [代码]/weui-miniprogram/weui-wxss/dist/style/weui.wxss [代码] 6. 引入组件 在想要使用组件的页面对应的js文件中,对组件进行的引入。一定要注意自己项目的目录结构!!! [图片] 而官方文档的写法是 [图片] 如果直接照搬官方文档的写法,则忽略了目录结构,会报错!! 接着在要使用组件的页面对应的wxml文件中使用该组件即可 [代码]<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog> [代码] 效果如下: [图片] 后记 不得不说,前端开发的坑实在是太多了,上面记录的过程我摸索了一个多小时。看来平时一定要多注意总结才行,不然真的非常消耗时间!!! 创作不易,觉得有用麻烦点个赞,谢谢~~~
2022-01-11 - 怎么在小程序的tabs选项中添加vtabs选项?
一、在原来的tabs选项中,如图: [图片] 其js代码如下: data: { tabs: [], activeTab: 0, }, onLoad() { const tabs = [ { title: '技术开发', }, { title: '产品解析', }, { title: '运营规范', }, { title: '营销经验', }, { title: '高校大赛', }, ] this.setData({ tabs }) }, onTabClick(e) { const index = e.detail.index this.setData({ activeTab: index }) }, onChange(e) { const index = e.detail.index this.setData({ activeTab: index }) }, handleClick(e) { wx.navigateTo({ url: './webview', }) } 二、添加vtabs选项,如图: [图片] 其js代码如下: data: { vtabs: [], activeTab: 0, }, onLoad() { const tabs = [ { title: '技术开发', title2: '小程序开发进阶', img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg', desc: '本视频系列课程,由腾讯课堂NEXT学院与微信团队联合出品,通过实战案例,深入浅出地进行讲解。', }, { title: '产品解析', title2: '微信小程序直播', img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png', desc: '微信小程序直播系列课程持续更新中,帮助大家更好地理解、应用微信小程序直播功能。', }, { title: '运营规范', title2: '常见问题和解决方案', img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg', desc: '提高审核质量', }, { title: '营销经验', title2: '流量主小程序', img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg', desc: '本课程共四节,将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议。', }, { title: '高校大赛', title2:'2020中国高校计算机大赛', img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg', desc: '微信小程序应用开发赛', }, ] this.setData({ vtabs: tabs }) }, onTabClick(e) { const index = e.detail.index console.log('tabClick', index) }, onChange(e) { const index = e.detail.index console.log('change', index) }, handleClick() { wx.navigateTo({ url: '../tabs/webview', }) } 添加后的效果,如图: [图片] 求大佬,其效果后的js代码如何合并? 谢大佬!
2020-06-26 - 微信服务号jssdk图片上传后 服务端调用媒体下载接口 报错40007
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
2021-05-18 - 微信公众号通过js-sdk录音并上传微信服务器返回的serverId都是一个,是什么问题?
使用微信公众号测试账号开发,遇到使用jssdk下的jweixin.uploadVoice()上传录音,每次返回的serverId都相同: 1237378768e7q8e7r8qwesafdasdfasdfaxss111 localId不同, 然后去后台下载录音文件结果都是 {"errcode":40007,"errmsg":"invalid media_id hint: [ON83ta01218661]"} 测试号appid:wx5cb57aa45095d16e 使用的微信开发者工具: [图片] 代码如下: [代码]jweixin.uploadVoice({[代码][代码] [代码][代码]localId: self.localId, [代码][代码]// 需要上传的音频的本地ID,由stopRecord接口获得[代码][代码] [代码][代码]isShowProgressTips: 1, [代码][代码]// 默认为1,显示进度提示[代码][代码] [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]var[代码] [代码]serverId = res.serverId; [代码][代码]// 返回音频的服务器端ID[代码][代码] [代码][代码]console.log([代码][代码]'serverId'[代码][代码],serverId);[代码][代码] [代码][代码]uni.request({[代码][代码] [代码][代码]url: serverUrl +[代码][代码]'/file/downloadFromWechatServer'[代码][代码],[代码][代码] [代码][代码]data:{[代码][代码] [代码][代码]serverId:serverId[代码][代码] [代码][代码]},[代码][代码] [代码][代码]success(res1) {[代码][代码] [代码][代码]console.log([代码][代码]'成功'[代码][代码]);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码]});[代码]java后台: [代码]try[代码] [代码]{[代码][代码] [代码][代码]String mediaId = request.getParameter([代码][代码]"serverId"[代码][代码]);[代码][代码] [代码][代码]String url = [代码][代码]"http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="[代码][代码] [代码][代码]+ accessToken + [代码][代码]"&media_id="[代码] [代码]+ mediaId;[代码][代码] [代码][代码]AccessToken.saveUrlAs(url, [代码][代码]"D:/upload"[代码][代码], [代码][代码]"GET"[代码][代码], [代码][代码]"fileName"[代码][代码]);[代码][代码] [代码][代码]} [代码][代码]catch[代码] [代码](Exception e) {[代码][代码] [代码][代码]e.printStackTrace();[代码][代码] [代码][代码]}[代码]
2019-09-30