微信小程序选项卡功能开发步骤与方法全解析
467
2023-11-07
基于mpvue搭建微信小程序项目框架的教程详解
简介：
mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说，无疑是目前最好的选择。mpvue从底层支持 Vue.js 语法和构建工具体系，同时再结合相关UI组件库，便可以高效的实现小程序开发
前言：
本文讲述如何搭建完整的小程序项目框架，因为是第一次使用，有不完善的地方请大佬指正。
搭建内容包括：
1、使用scss语法：依赖插件sass-loader 、node-sass
2、像vue一样使用路由：依赖插件 mpvue-entry 和 mpvue-router-patch
3、使用ZanUI:有赞团队的小程序版UI组件库（GitHub）
4、使用vuex进行状态管理
5、使用flyio进行数据交互：GitHub地址
项目结构：
讲解：
一、使用scss语法
1、安装依赖
cnpm install node-sass sass-loader --save-dev
因为一些不知名的原因导致node-sass经常安装失败，所以采用cnpm方式安装最好
2、在.vue文件中的style节点加上lang=”scss”，这样就可以愉快地使用sass进行开发了，无需再webpack.base.config.js中配置loader，webpack会自动识别.scss文件以及.vue中的scss代码。
二、像vue一样使用路由
在使用mpvue提供的命令 vue init mpvue/mpvue-quickstart my-project 创建项目后，会发现每个页面都要配置main.js 文件，不仅繁琐而且显得多余，所以我们是否可以改造成像vue一样使用路由的方式呢，答案是可以的，需要用到mpvue-entry 和 mpvue-router-patch插件（集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新）和
mpvue-entry: 集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新
mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由写法
1、安装依赖
?
1
2
cnpm install mpvue-entry --save-dev
cnpm install mpvue-router-patch --save
2、项目src文件夹下创建router文件夹和router.js文件
3、项目引入src下的main.js文件
?
1
2
3
import Vue from vue
import MpvueRouterPatch from mpvue-router-patch
Vue.use(MpvueRouterPatch)
注：main.js的 export default {} 不能为空，不然编译时不生成app.json文件
4、修改webpack.base.conf.js配置文件
5、配置router.js 文件
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 首个路由为首页
module.exports = [{
path: pages/index,
name: Index,
config: {
navigationBarTitleText: 文章详情,
//引入UI组件，后面会讲到
usingComponents:{
"zan-button": "../dist/btn/index"
}
}
}, {
path: pages/list/list,
name: List,
config: {
navigationBarTitleText: list详情
}
}]
三、使用小程序UI组件
1、将UI组件库克隆到本地
2、将上图中的dist目录拷贝到mpvue项目的输出目录中
3、在router.js文件中引入UI组件
?
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = [{
path: pages/index,
name: Index,
config: {
navigationBarTitleText: 文章详情,
//引入UI组件
usingComponents:{
//组件名和引用路径
"zan-button": "../dist/btn/index"
}
}
}]
4、页面中使用UI组件
?
1
2
3
4
5
<template>
<div class="index">
<zan-button type="primary" size="small">确认付款</zan-button>
</div>
</template>
5、
小程序使用自定义组件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
ZanUI组件库使用讲解：https://github.com/youzan/zanui-weapp/blob/dev/README.md
四、使用vuex进行状态管理
1、安装
cnpm install vuex --save
2、引入（main.js文件）
?
1
2
impotr store from ./vuex/index
Vue.prototrype.$store = store//挂在到vue原型上
五、使用flyio进行数据交互
1、安装
cnpm install flyio --save
2、引入（main.js文件）
?
1
2
3
const Fly = require("flyio/dist/npm/wx")//引入
const fly = new Fly
Vue.prototrype.$fly = fly//挂在到vue原型上
3、使用
?
1
2
3
4
5
6
7
8
9
10
11
12
add(){
//在add方法中执行接口请求
this.$fly.get(http://******/user?id=133)
.then(function (res) {
//请求成功
console.log(res,res);
})
.catch(function (err) {
//请求失败
console.log(err,err);
});
}
总结
以上所述是小编给大家介绍的基于mpvue搭建微信小程序项目框架的教程详解
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！您可能感兴趣的文章:详解微信小程序开发(项目从零开始)微信小程序 删除项目工程实现步骤微信小程序项目总结之记账小程序功能的实现（包括后端）微信小程序转化为uni-app项目的方法示例简单了解微信小程序的目录结构微信小程序学习笔记之目录结构、基本配置图文详解微信小程序购物商城系统开发系列-目录结构介绍微信小程序开发（二）图片上传+服务端接收详解微信小程序 增、删、改、查操作实例详解微信小程序 实战小程序实例微信小程序学习总结（一）项目创建与目录结构分析
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~