微信小程序
关注
分享
扫一扫
文章平均质量分 57
微信小程序的开发手记，记录开发过程中所遇到的问题
就像风1样
这个作者很懒，什么都没留下…
展开
-
微信小程序三种开发方式对比（原生，wepy，mpvue）
前言 如今公司随潮流，把现有h5项目，重做成小程序项目！网上搜索到 现微信小程序的三种开发方式 做下对比！不足之处请多多指点！开发文档原生开发小程序文档：点此进入 wepy 开发文档：点此进入 mpVue 开发文档：点此进入三者的简单对比小程序缺点个人认为小程序开发中，最大的缺点，也是很蛋疼的问题不支持vue的过滤器filters(因此数据都得提前...原创 2019-04-11 10:43:30 · 3805 阅读 · 0 评论 -
mpvue开发微信小程序富文本编辑功能非解析（标题，图片，文本框简单demo代码全）
先上图：大概就是要个带 标题，图片，文本框 编辑的功能，用的mpvue 写的网上也没找到合适的例子，就自己写了个！主要代码：//to详情富文本显示 toDetails(){ this.ifRichText=true },//html<div class="RichText" v-if="ifRichText"> ...原创 2019-05-28 18:23:35 · 1036 阅读 · 1 评论 -
微信小程序-mpvue资源收集
目录工具 框架 组件 示例 模板工具flyio- 同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用。 minapp-api-promise- 将所有异步微信小程序API promise化，支持then/catch、async/await的方式调用小程序API;支持请求队列，支持对原生API进行...转载 2019-05-28 09:56:19 · 269 阅读 · 0 评论 -
mpvue开发微信小程序定位功能获取城市名及code码（原生获取经纬度高德解析，完整代码）
先上效果图：说明： 用了原生的wx.getLocation 定位功能获取 经纬度，然后通过高德解析位置（可以获取位置信息，及附近地址，天气等）准备：需要下载高德小程序位置组件https://lbs.amap.com/api/wx/download配置：在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js （amap-wx.js 从相关下载页面下载的 zip 文件...原创 2019-05-21 11:52:33 · 3558 阅读 · 2 评论 -
mpvue开发微信小程序锚点滚动城市列表 引用scroll-view （代码全）
先上效果图：引用微信小程序官方的 scroll-view 组件https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html主要通过更改:scroll-into-view="toView"的内容 很方便就 写出效果 记着加scroll-with-animation 就有动画过渡的效果！...原创 2019-05-20 15:26:05 · 1977 阅读 · 8 评论 -
mpvue开发微信小程序关于数据存储获取不到的坑
具体使用情景是这样的，程序一进来有个登录界面，输入账号密码后登录成功，服务器会返回该用户的具体信息，其中就包括我立即需要保存下来，供全局使用的用户token。mpvue：原生小程序：直接给data内token赋值。但是这时候打印this.data.token却是空的，没有取到值。另外我也试了另外一个方法， 直接声明有个变量接收，如：var token = wx.getStora...原创 2019-05-16 15:33:01 · 1889 阅读 · 0 评论 -
mpvue开发微信小程序上传图片（附后端代码）（含城市联动，多项选择功能代码全）
小程序也是可以上传图片的，微信小程序文档也写的很清楚。先看效果图GIF上传图片通过wx.chooseImage(OBJECT)实现官方示例代码wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType...原创 2019-05-15 13:43:08 · 2339 阅读 · 0 评论 -
mpvue开发微信小程序关于wx.showToast显示多个字的问题
wx.showToast不能超过7个字的BUG何时解决?如何用别的代替？后端返回的message 一般都比较长 但是带图标的wx.showToast不能超过7个字 只能去掉图标效果让提示显示完整！！上图看效果：wx.showToast({ title: res.message, icon: 'none', duration: 3000, ...原创 2019-05-06 16:26:03 · 1235 阅读 · 0 评论 -
mpvue开发微信小程序网络请求request 方式配置详解(fly)-fail invalid url
request 指的是小程序中的网络请求，在 mpvue框架中可以通过小程序提供的原生 APIwx.request来进行相关的处理。但是在这里推荐一个第三方的网络请求库fly。之所以推荐这个第三方库，是因为可以在多个端上实现代码的复用，目前已支持的有Node.js、微信小程序、Weex、React Native、Quick App。mpvue没配置请求方式时碰到如下图的错误：...原创 2019-04-16 11:37:43 · 1542 阅读 · 0 评论 -
微信小程序开发步骤
1。下载微信开发者工具！https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2。搜索 微信公众平台3。找到帐号分类下面的 小程序 前往注册4。邮箱注册 936714606@qq.com 激活个人 管理员二维码扫描5。左边的 设置菜单 右边开发者设置 找到AppIDwxef15a...原创 2018-09-07 09:57:33 · 311 阅读 · 0 评论 -
mpvue开发微信小程序自带tabbar点击切换数据不刷新问题
微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作，需要在我的个人中心页面中实时显示出来，但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求所以总是会造成一些数据更新不及时问题而阅读小程序文档发现了小程序是给提供了解决办法的onShow/***生命周期函数--监听页面显示*/onShow:function(){...原创 2019-05-06 16:08:46 · 418 阅读 · 0 评论 -
mpvue开发微信小程序城市三级联动加筛选功能
先看效果：上图这里引用了 Mpvue-WeUI 但是原生的组件没有不限地区的功能自己手写上取消每个级别的取消Mpvue-WeUIhttps://mpcomponent.github.io/mpvue-weui/guide/代码全↓↓↓↓<template> <div class="longinPage"> <div cl...原创 2019-04-30 16:50:32 · 395 阅读 · 0 评论 -
mpvue开发微信小程序上拉加载功能（代码全）
先上图 看效果：刚进入页面是8条数据，取消地区后是68条数据 这里 每15条数据分一页，滚动底部自动加载新的一个接口push到列表中；滚动中可以看接口请求一直在添加 到最后无数据 就不会发起新的请求准备开始：基于mpvue 在main.js中import Vue from 'vue'import App from './index'// add this to h...原创 2019-04-30 16:10:51 · 389 阅读 · 0 评论 -
mpvue开发微信小程序页面跳转（入坑传递多个参数网址类型）
1. 利用小程序提供的 API 跳转：// 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111'})// 关闭当前页面，返回上一页...原创 2019-04-29 17:15:25 · 435 阅读 · 0 评论 -
mpvue开发微信小程序：数据存储、传值、取值
小程序界面传值父级界面：A界面子级界面：B界面一、url传值详细的配置参数可以查看组件导航：navigator,这里不再做过多的解释。1. 正向传值：A界面 –>B界面用 navigator标签或 wx.navigator传值，A界面向B界面传id值A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一：navigator...原创 2019-04-29 17:09:46 · 532 阅读 · 0 评论 -
mpvue开发微信小程序跳转到其他网页(外部链接)
个人类型和海外类型的小程序不支持 web-view标签也就是说个人申请的小程序，就别想跳转了！！！！1.开发的时候，我们难免碰到要跳转到其他网页中去那该怎么实现呢？2.例如我想点击一个按钮，跳转到百度（百度的网页还是在小程序中打开）3.wxml 1. index.wxml(按钮页面)<view class='wrapper'> <...原创 2019-04-29 17:04:30 · 805 阅读 · 0 评论 -
mpvue开发微信小程序多级联动功能
先看效果：上图 看了一下小程序的开发文档，好像没有发现可以直接实现多级联动的组件或者可选的 API（如果有，请打醒我），不过它提供了自定义选择器的组件picker-view和picker-view-column，picker-view-column相当于是选择器的每一列，并且picker-view-column之间的数据都是独立的，而且picker-view提供了...原创 2019-04-24 11:39:02 · 474 阅读 · 0 评论 -
mpvue开发微信小程序未找到 app.json 中的定义的 pages "pages/Advertisement/main" 对应的 WXML 文件
用mpvue开发微信小程序，开发过程中-过个双休日后上班打开项目从新写结果 微信开发者工具报错什么未构建，开始没理他，后来调试页面发现之前写好的页面有两个打不开，新写了3个页面没问题，写第四个页面时打不开了，配置什么都没改，和之前的页面配置都一样；代码看过之后也没问题；还是有未构建的那个报错，上传码云后，本地代码删了，从新git拉取代码 npm install结果微信开发者工具...原创 2019-04-22 17:13:03 · 1349 阅读 · 0 评论 -
mpvue开发微信小程序navigateBack失效于tabBar
返回上一层的navigateBack路由要是与配置的tabBar栏目路由相同的话,返回会失效,需换用switchTab//app.json里面设置的tabBar"tabBar": { "list": [ { "text": "返利", "pagePath": "pages/index/main", "iconPath": ...原创 2019-04-19 13:29:59 · 1321 阅读 · 2 评论 -
mpvue开发微信小程序路由跳转底部导航tabBar
mpvue开发微信小程序时,用标签属性做路由跳转的话,open-type属性值要注意:tabBar 微信自带底部导航1.open-type="switchTab" 跳转tabBar路由2.open-type="navigate" 跳转非tabBar路由(默认值)<a href="/pages/index/main" open-type="switchTab" class="...原创 2019-04-19 13:27:16 · 1712 阅读 · 0 评论 -
mpvue开发微信小程序修改头部标题颜色
修改标题第一种方法：通过 wx.setNavigationBarTitl 设置mounted(){ this.onLoad() }, methods: { onLoad:function(options){ wx.setNavigationBarTitle({ title: '修改后的标题', success: fu...原创 2019-04-17 14:16:59 · 1938 阅读 · 0 评论 -
mpvue开发微信小程序去掉目录的main.js
mpvue每个页面必须对应一个main.js，导致每个页面都需要建一个目录，目录下方建一个main.js，感觉非常的繁琐有大神开发了mpvue-entry插件1.安装插件npm install mpvue-entry2.来到项目（mpvue-project）下方的build->webpack.base.conf.js文件const MpvueEntry ...原创 2019-04-16 13:16:01 · 1146 阅读 · 1 评论 -
基于mpvue开发微信小程序，入门开发步骤
接下来。。。。。1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载nodejs并安装。然后打开命令行工具：# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源$ npm set ...原创 2018-09-07 09:55:53 · 3518 阅读 · 0 评论 -
基于mpvue写微信小程序mpvue-docs跳转页面
打开github，把项目克隆下来https://github.com/F-loat/mpvue-quickstart跳转页面，废话不多说直接点。。。打开pages.js默认是有两个页面的，现在新添加一个newpage的页面这样加就行了！然后是 用模版上的方法去跳转页面已测试OK，虽然是很简单的问题，但是没找到在哪写的，所以给记录下来！希望对你有用...原创 2018-09-10 14:13:53 · 1370 阅读 · 0 评论 -
用Mpvue开发微信小程序，微信语音聊天
1.github项目https://github.com/F-loat/mpvue-quickstart2.参考项目 githubhttps://github.com/unmagic/wechat-im更改app.js安装依赖 npm installTerminal运行 gulp 即可开启WebSocket服务然后在微信小程序里打开详细介绍看 转载http...原创 2018-09-10 19:16:57 · 2584 阅读 · 1 评论