mpvue-doc(关于小程序开发的一些想法)

发布时间：2020-12-14 19:14:58 所属栏目：资源来源：网络整理

导读：对于初学者,最好的入门方式就是通读官方文档,不建议记api,用的时候可以快速找到就好小程序官方文档 mpvue官方文档微信开发者工具不推荐使用原生开发的几点理由开发效率低频繁setData有性能消耗问题 3.wx.request存在并发量限制问题(最大并发量不能超过1

对于初学者,最好的入门方式就是通读官方文档,不建议记api,用的时候可以快速找到就好

小程序官方文档
mpvue官方文档
微信开发者工具

不推荐使用原生开发的几点理由

开发效率低
频繁setData有性能消耗问题

3.wx.request存在并发量限制问题(最大并发量不能超过10)

关于尺寸

不支持vue-router

原生和mpvue官方不支持,这里是一个在mpvue基础上改造来的框架,支持vue-router类语法(对mpvue做了扩展)?猛撮这里?.

组件支持自定义类继承语法

<!-- index.vue -->
import BasePlatePage from '@/utils/basePlatePage'
export defalut new BasePlatePage({
	data(){},methods:{},...
})
复制代码

类继承方式扩展了组件能力,可以阻塞生命周期方法(一般是onLoad),来实现一些预备逻辑,例如授权
按需引入

不支持运行环境判断

但是有变通的办法

小程序中__wxConfig.envVersion可以用来区分小程序体验版，开发板，正式版.
			envVersion 类型为字符串
			envVersion: 'develop',//开发版
			envVersion: 'trial',136);">//体验版
			envVersion: 'release',136);">//正式版
			这样我们就可以变通的来实现小程序中动态切换域名,避免手动注释切换的方式.
			
			<!-- request.js -->
			let envVersion = __wxConfig.envVersion || 'develop';
			const url = envVersion === 'develop' ?  Store.state.testUrl ? Store.state.baseUrl

复制代码

通用

分包加载

主流方式

1.创建目录

pages 目录同级创建分包目录 moduleA->ma1.vue

2.配置

<!-- pages.json -->
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index","style": {
				"navigationBarTitleText": "uni-app"
			}
		},{
			"pages/index/todoList",0);">"todolist"
			}
		}

	],0);">"subPackages": [{
		"root": "moduleA",0);">"pages": [{
			"ma1",0);">"ma1"
			}
		}]
	}],0);">"globalStyle": {
		"navigationBarTextStyle": "black",0);">"uni-app",0);">"navigationBarBackgroundColor": "#F8F8F8",0);">"backgroundColor": "#F8F8F8"
	}
}
复制代码

mpvue-quickstart 框架下分包的使用方式

生命周期方法

mpvue支持vue所有生命周期方法和小程序所有生命周期方法
页面跳转传参,只能在在onLoad方法以及之后方法中获取,onLoad中为事件参数e,onLoad之后方法通过this. mp.query

<!--index.vue  -->
export default {
  onLoad(e) {
   console.log(e,0);">'onLoad') //e:上个页面传递的参数对象{a: 1,b:2}
   
  },onShow() {
	  console.log('onShow')
  },onReady() {
     'onReady')
  },created () {
    console.log(this.$root.$mp.query,0);">'created') //获取不到参数,并且会报错,原因是页面传递的参数最早是从onLoad中获取
  },mounted() {
    'mounted') //可以获取到页面传递的参数
  }
}

打印顺序依次为 created,onLoad,onShow,onReady,mounted
复制代码

模板语法支持情况

扫码进入指定页面

1.前端给后台指定页面路径,后台进行配置,生成二维码 2.前端在onLoad中使用decodeURIComponent方法解析获取

onLoad(params) {
	if (params && params.scene) {
		this.id = decodeURIComponent(params.scene).split('=')[1];  //扫码进入获取二维码携带的参数
	} else {
		this.id = this.$route.query.id //普通路由跳转,携带的参数
	}
}
复制代码

1.点击右上角"转发"按钮转发 2.页面内发起转发

<!-- share.vue -->
<template>
<div>
	  <button class="share-btn" open-type="share">分享一下</button>
</div>
</template>
default {
	data() {
		return {
			shareImageURL: "https:xxx" //图片地址
		}
	},methods: {
		
	},136);">//该方法为转发的核心方法,必须要有,否则不会触发转发
 onShareAppMessage(from){
	 if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
		return {
			title : '小程序购物',136);">//转发标题,默认小程序名称
			path : '/pages/share',136);">//转发路径,默认当前页面 path ，必须是以 / 开头的完整路径
			imageUrl : this.shareImageURL //自定义图片路径,支持网路路径和本地路径,png,jpg格式,默认使用截图
		}
	},}
复制代码

request请求

wx.request

小程序原生请求api,没啥说的,具体可以看wx.request

wx.request({
  url: 'test.php',136);">//仅为示例，并非真实的接口地址
  data: {
    x: '',y: ''
  },51); font-weight: 700;">header: {
    'content-type': 'application/json' // 默认值
  },success (res) {  //接口请求成功的回调函数
    console.log(res.data)
  },51); font-weight: 700;">fail(res) { //接口请求失败的回调函数
	  .log(res)
},51); font-weight: 700;">complete(res) { //接口调用结束的回调,无论成功,失败都会执行
	.log(res)
)
复制代码

fly.io

官方描述:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

<!-- 栗子 -->
//token
import auth from './auth'
import Store '../store'

const Fly = require('flyio/dist/npm/wx')
const fly = new Fly
const serviceURL = Store.state.domain;

const baseConfig = {
	method : 'post',timeout : 30000,parseJson : true,withCredentials:false
}

fly.config = baseConfig;

//请求拦截
fly.interceptors.request.use((config)=>{
    //请求头
	let token = auth.getToken();
    config.baseURL = serviceURL;
    config.headers['token'] = token;
	return config
})

//响应拦截器
fly.interceptors.response.use(response => {
	// 特殊提示
	if(Number(response.data.error) === 1){
		//console.error(response)
		wx.showModal({
			title: '出错啦',content: response.data['error_reason'],showCancel: false
		})
		return { fail : true }
	}

	// 出错了
	if (Number(response.data.error) !== 0) {
		console.error(fly.config)
		console.error(response)
		wx.hideLoading();
		wx.showModal({
			title: '温馨提示',96);">true }
	}

	return response.data && response.data.data || { success: true };
},error=>{
	wx.showModal({
		title: content: '服务器开小差了~',96);">false
	})
	// 必须返回响应数据对象，否则后续无法对响应数据进行处理
	return error;
})

default fly
复制代码

下拉刷新

1.app.json文件进行enablePullDownRefresh属性配置
2.当前页面书写onPullDownRefresh方法(下拉刷新操作会自动触发该方法)

<!--app.json  -->
{
  "pages": [
    {
      "pages/index",0);">"config" : {
        "enablePullDownRefresh": true,//当前页面是否允许下拉刷新
        "首页"
    }
    },{
      "pages/counter"
    },0);">"packageA/logs",0);">"subPackage": true
    }
  ],0);">"window": {
    "backgroundTextStyle": "light",0);">"#fff",0);">"WeChat222",0);">"black"
  }
}
<!-- index.vue -->
export default {
	data() {
		return {}
	},methods: {},onPullDownRefresh: function() {
	 // Do something when pull down.
	  setTimeout(() => {
            wx.stopPullDownRefresh();  //停止当前页面下拉刷新,这句代码必须写,否则会出现下拉后不返回的现象
        },1500);
  },}
	
复制代码

上拉加载

这个方法一般不需要app.json文件中配置,但是有的手机上会出现触底后方法不触发的现象,因此,为了解决这个问题,然后在app.json里面设置下触发距离

scroll-view

scroll-view 是一个比较消耗性能的组件,遇到顶部带有navBar切换有长列表(分页加载)的页面首先考虑使用定位+页面滚动方式,实在不行再考虑使用该方法

部分原生组件的层级问题

小程序中部分原生组件,例如video,map等存在层级最高且无法通过z-index降低的问题,可以放一张图片进行占位,然后点击图片跳转到一个新页面播放视频或者展示地图
cover-view和cover-image 覆盖层

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!