微信小程序
文章平均质量分 60
pamerely
这个作者很懒,什么都没留下…
展开
-
mpvue的生命周期
mpvue的生命周期mpvue有着vue和小程序的生命周期,弄清楚它们的执行顺序很重要在控制台输出一下就知道它们的执行顺序 created() { console.log('page index created') }, mounted() { console.log('mounted') }, onLoad() { console.log('page原创 2020-11-03 11:19:54 · 337 阅读 · 0 评论 -
mpvue引入第三方ui库-vant Weapp
mpvue项目引入第三方ui组件,这里我用的是vant Weapp举栗子下载组件在github上下载压缩包下载地址:https://github.com/youzan/vant-weapp下载完之后,解压,把里面dist重命名为vant,然后把整个文件夹放到mpvue项目中dist文件夹内然后在路由的文件引入 src/router/router.jsmodule.exports = [ { path: '/pages/login/index', name原创 2020-11-03 11:06:05 · 524 阅读 · 1 评论 -
mpvue项目中一些小坑
v-for必须加key属性,否则编译不了v-for只有一个参数时,不能加括号(),否则报final loader didn’t return a Buffer or String编译失败小程序image标签没有width、height属性,这样写无效<img width="80px" height="80px" />v-if条件,不能写太复杂,这样写会报错<div v-if="obj !={}"></div>子组件传参,不能传对象不支持document.原创 2020-11-03 10:51:31 · 199 阅读 · 1 评论 -
微信小程序封装fly.js请求
封装fly.js请求flyio文档地址:https://wendux.github.io/dist/#/doc/flyio/interceptor添加链接描述使用前先下载依赖$ npm install flyio直接贴代码var Fly=require("../miniprogram_npm/flyio/index") var fly=new Flyfly.config.baseURL="http://11.11.111.111:8888/api/"fly.config.timeout=1原创 2020-11-03 10:38:55 · 631 阅读 · 1 评论 -
mpvue-axios封装
axios封装import axios from 'axios'import qs from "qs";const BASEURL = process.env.BASEURL;const service = axios.create({ timeout: 50000 // request timeout})service.defaults.adapter = function (config) { return new Promise((resolve, reject) =>原创 2020-11-03 10:26:02 · 284 阅读 · 1 评论 -
mpvue中使用echarts
mpvue中使用echarts安装依赖$ npm install echarts$ npm install mpvue-echarts我把它封装成了一个组件<template> <div :class="className" :style="{height:height,width:width}" > <mpvue-echarts lazyLoad :echarts="echarts" :onInit="ecBarInit" canvasId="lin原创 2020-11-03 10:00:36 · 1358 阅读 · 0 评论 -
mpvue项目中使用vue-router
mpvue项目只用vue-routervue项目都是使用vue-router的路由跳转,而小程序中是不能使用vue-router,这时候就需要一些插件要完成在mpvue中使用vue-router.mpvue-entrympvue-entry:集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面的热更新。mpvue-router-path在mpvue中使用vue-router兼容路由写法,npm地址:https://www.npmjs.com/package/mpvue-router原创 2020-11-03 09:49:48 · 931 阅读 · 0 评论 -
vue项目转小程序-mpvue项目创建
vue项目转小程序-mpvue项目创建前言创建mpvue项目前言这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。创建mpvue项目mpvue是美团开源的项目,先贴上官方地址:http://mpvue.com/创建项目前先检查一下node和npm是否安装好,然后开始安装vue-cli脚手架,注意,这要2.x版本的,3.x版本的创建不了。$ npm install --global vue-cli@原创 2020-11-03 09:15:13 · 3061 阅读 · 0 评论 -
npm构建微信小程序
npm构建微信小程序从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。而且用npm下载一些第三方插件,开发起来也比较方便。创建项目先下载微信开发者工具,这个就自己去官网下载吧,我选的是稳定版,这个就看你们各自的需求了。下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html下载完之后,扫码登录自己的微信号,然后就可以创建一个原创 2020-08-15 18:10:18 · 576 阅读 · 0 评论 -
小程序双向数据绑定
小程序双向数据绑定前言小程序的input是单项数据流,不像vue的双向绑定那么好用。<van-field model:value="{{ name }}" label="姓名" placeholder="请输入姓名" border="{{ false }}" required error-message="{{rule.name}}" />注意这里的model:value的变量只能是data里面定义的,不能是对象原创 2020-08-14 17:44:32 · 1803 阅读 · 0 评论 -
微信小程序低版本兼容async/await,regeneratorruntime is not defined
前言用过async/await组合就知道,比promise好用,但是微信小程序比较新的版本才兼容,微信7.0.11及以下的版本的不兼容,会报错。不过可以用facebook提供的regenerator-runtime,可以解决这个问题。下载依赖npm i regenerator-runtime引入文件在使用async/await的页面的index.js引入import regeneratorRuntime from 'regenerator-runtime'然后在源文件还要删掉一段代码,原创 2020-08-14 16:24:55 · 597 阅读 · 2 评论 -
微信小程序 拨打电话功能
微信小程序 拨打电话功能微信官方文档用法微信开发工具的模拟器效果微信官方文档https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html用法wx.makePhoneCall({ phoneNumber: '13530242280', success:res=>{ console.log(res) }, fail: f原创 2020-08-14 10:10:00 · 869 阅读 · 0 评论