美文网首页前端Vue专辑微信小程序开发Web 前端开发
微信小程序系列1--搭建基于mpvue的小程序项目

微信小程序系列1--搭建基于mpvue的小程序项目

作者: 小鳄鱼的大哥哦 | 来源:发表于2019-03-21 19:23 被阅读3次

项目空闲时间,来做一波温故知新。

当前时期的需求是做一个拼团的小程序。

在这之前在做一个微信公众号H5项目,技术栈是Vue全家桶(vue+router+vuex+vant...)。在新的小程序项目中有很多组件类似于之前项目的组件,所以决定使用mpvue作为基础来搭建项目。

mpvue框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

简而言之,就是可以用类似vue的语法来开发小程序,通过mpvue配置好的各种loader来将vue文件转换为小程序需要的wxml,wxss

站在巨人的肩膀上,别人的分享为我提供了很多的方便。下面介绍项目的第一步,搭建环境。

从第一步搭建环境开始记录。建议使用cnpm,开发过程中会需要填写appid等信息,不过要是练手的话也可以不用填

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

上面流程走完,项目中会多出一个dist文件夹,这就是生成的微信小程序项目。OK,然后打开微信开发者工具,选择小程序----体验模式(没有appid时),将项目目录指向刚刚生成的dist文件夹。好了,页面出来了。

这就完了?

当然 没有

需要知道的地方:
1.最重要的当然是看文档,mpvue的文档相当的简单,是我辈开发者的最爱。
2.自己的代码在/src里面,每个页面一个文件夹,包含这三个文件

image.png
  • index.vue 这是页面主页文件,完全和vue的语法相同,可以放心食用
  • main.js 这个是将vue实例化的一个文件,建议不要修改,即每个页面文件夹都是这样


    image.png
  • main.json 看过小程序文档的都知道,这个文件可以用来配置小程序顶部tab的标题和颜色之类的东西


    image.png

3.在/build/utils.js文件夹里,有一堆配置,初学者可以不用管它三七二十一的。不过需要修改一下px2rpxLoader的属性,这里的意思是将css代码中的px转换成小程序的rpx(小程序标配的尺寸,自适应效果很好)原本基础配置是2比1,意思是将2px转换成1rpx。我们将它改成1比1,这样就可以直接按照标注图上的px单位来敲代码了。

var px2rpxLoader = {
    loader: 'px2rpx-loader',
    options: {
      baseDpr: 1,
      rpxUnit: 1
    }
  }

4.配置环境变量
为了统一并且方便,我们通常都会配置一个环境变量来保持devproduct的代码统一。
/config/dev.env.jsdev版本

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  //服务器域名,这里展示测试服的服务器地址
  API_ROOT:'"http://beta.baidu.com"'  
})

/config/prod.env.jsproduct版本

module.exports = {
  NODE_ENV: '"production"',
  // 服务器域名
  API_ROOT:'"http://baidu.com"'
}

取值:这样就能在代码一致的情况下,配置不同的地址(其他更多不同的地方)。

const url =  process.env.API_ROOT;

我说使用到的环境搭建以及基本配置就已经完成了。

订个计划吧,在该系列中我会记录以下问题

  1. 小程序页面跳转路由问题,路由栈问题
  2. 添加页面问题
  3. vue和小程序生命周期的和谐处理方式
  4. 页面之间传值的问题
  5. 常用的小程序原生组件问题
  6. 第三方库的处理方式

相关文章

网友评论

    本文标题:微信小程序系列1--搭建基于mpvue的小程序项目

    本文链接:https://www.haomeiwen.com/subject/dvbcvqtx.html