编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

高效开发小程序,mpvue了解下(mpvue搭建小程序)

wxchong 2024-09-03 02:19:32 开源技术 10 ℃ 0 评论

作者:Eknow

地址:https://mp.weixin.qq.com/s/hAAJcBPQle0zkKX4x65gPQ

序言

小程序一定是今年热门话题之一,对于我们开发者来讲,开发小程序也是属于我们的技能之一了。从去年我也玩过小程序,但当时处于内测的阶段,各种反人类的设计都有,连es6都不支持,只能说瞎折腾了。到了如今,小程序迎来春天,友好度提高了不少,wepy、taro与mpvue的出现也带来更高的开发效率。

什么是mpvue

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

有以下几个亮点:

  • 跟vue一样的开发体验,包括vuex

  • H5代码转换编译成小程序目标代码的能力。

完成一个demo

学习一个新知识,实操才是最重要的一环。这一小节,将会完成一个简单的开发流程。
  1. 安装vue-cli
    首先,安装下vuecli这一脚手架。

npm install --g vue-cli

vue

  1. 开始构建项目
    执行以下命令,用来自动构建一个项目(构建过程会进行工具的选择,其中包括Eslint的使用,如果没用过的可以选择n,同时会生成一系列的文件)

vue init mpvue/mpvue-quickstart test-mpvue

  1. 安装依赖以及运行项目
    项目生成后,为了保证运行成功,需要先install一下依赖包,可以使用这一命令。

npm install

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install

  1. 微信开发工具
    项目运行成功之后,下载微信开发工具并且打开小程序的入口,项目目录填的是【test-mpvue】-【dist】;APPID填写的是从【微信公众号】-【设置】-【AppID】获取到的值,项目名称任意填即可。

架构优化

前面的步骤完成后,项目的基本模板已经生成,不过呢,参照小程序的官方文档(https://developers.weixin.qq.com/miniprogram/dev/api/)之后,发现还是有一些硬性的要求,例如wx.request

wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})

在上面的代码中,header字段是固定的,完全可以封装一个tool,包括url的前缀也是固定不变的,因此可以以传参的方式以及暴露一个promise来进行调用,这样的代码不仅维护性高,而且也具有较强的复用性。

着手开发

1.在项目架构中,找到造轮子的文件夹【src】-【utils】,新建一个文件【request.js】。let urlPath = 'https://xxx';

export function request(url,data) {

return new Promise((resolve,reject) => {

wx.request({

url: urlPath + url,

data: data,

method:'post',

header: {

'content-type': 'application/json'

},

success(res) {

resolve(res.data)

},

fail(ret) {

reject(ret)

}

})

})

}

2.在【src】-【app.vue】中引用request.js文件, 发起请求。import {request} from '/src/utils/request.js'

exports default{

mounted {

this.fetchData;

},

methods:{

async fetchData{

let res = await request('aaaaa',{bbb:''})

}

}

}

小程序部署到腾讯云

上面分享的内容呢,主要是围绕“小程序的现状”、“什么是mpvue?”、“搭建基础架构”等几个话题展开的。接下来,主要是以“小程序部署到腾讯云”为主题进行分享的。一般项目在上线部署环境的时候需要多个流程,腾讯云会将上面一整套上线部署的标准打了个包,同时呢也提供了免费的开发环境,等到上线的时候买个域名+服务器就可以了。这就是我个人推荐使用腾讯云的原因。

腾讯后台搭建

登录到腾讯云

由于要搭建腾讯云开发环境,首先就要进入腾讯云后台进行本地的配置。【小程序后台】-【设置】-【开发者工具】-【腾讯云】

下载node.js Demo找到开发环境中的下载测试代码,将其download下来,打开里面的文件夹,因为开发的小程序代码属于client端,所以只需要拿取server文件夹即可。【下载node.js版本demo】-【wafer压缩包】-【server】

部署到mpvue初始化的项目复制server文件夹到已经使用mpvue初始化的项目test根目录下,同时修改project.config.json的文件,将云端路径更改为本地的server路径。

"qcloudRoot":"./server",
  1. 开始上传上面几个步骤也就配置完了,接下来就在微信开发者工具将代码上传到腾讯云后台,上传过程中需要注意的是将node_modules给去掉;同时按照模块上传,等待上传成功,整一套流程也就基本完成了。

本地开发环境的搭建

在开发者工具中,有一个不太友好的地方在于每次修改后台代码的时候都要上传代码到腾讯云,这会导致效率大大降低,因此可以考虑下搭建本地环境。当然腾讯云有着相关的开发文档,参照着官方文档可以很快地搭建好。下面Eknow君分享下搭建的过程。
  1. 配置config.js
    既然要参考文档,我们便需要从【腾讯云】-【文档平台】-【 微信小程序开发者工具】-【 常见问题 】-【node相关】入手,找到【本地如何搭建开发环境】这一小节,便可以进行相应地配置。找到之前部署到mpvue初始化的项目里【server】-【config.js】,将下面的代码对应粘贴进去。同时将端口改为5757

const CONF = {

// 其他配置 ...

serverHost: 'localhost',

tunnelServerUrl: '',

tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',

// 腾讯云相关配置可以查看云 API 密钥控制台:https://console.cloud.tencent.com/capi

qcloudAppId: '您的腾讯云 AppID',

qcloudSecretId: '您的腾讯云 SecretId',

qcloudSecretKey: '您的腾讯云 SecretKey',

wxMessageToken: 'weixinmsgtoken',

networkTimeout: 30000,

port: '5757',

}

qcloudAppIdqcloudSecretIdqcloudSecretKey三个属性需要自己配置。配置MySQL

配置完config.js之后呢,就是要初始化数据库环境了。在这里分为2步,

第一,启动数据库服务。在这里Eknow君推荐phpstudy,可以不用再手动安装Apache等服务。直接打开http://localhost/phpMyAdmin/,,账号密码都是默认的root。按照模板创建cAuth数据库,同时在server里的config.js进行MySQL配置。

第二,打开cmd面板,安装依赖cd server

npm install

//安装全局依赖,用来热启动,方便进行调试

npm install -g nodemon

node tools/initdb.js

Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

create_time字段进行修改, `create_time` datetime NOT COMMENT '创建时间',

`last_visit_time` timestamp NOT DEFAULT CURRENT_TIMESTAMP,

最后,需要本地启动调试环境,启动debug模式。

  1. 测试本地服务
    最后,我们需要测试下本地的是否成功运行,找到【server】-【controllers.js】-【创建demo.js】,暴露一个json信息。

module.exports = ctx => {

ctx.state.data={

msg : 'Hello Mr.Eknow'

}

}

http://localhost:5757/weapp/demo

到此,整个小程序的本地开发环境便成功搭建起来了。有点小激动~

总结

通过上面的一系列操作后,小程序上传测试代码到腾讯云还有搭建腾讯云后台本地开发环境的方法已经分享完。老铁们也应该对mpvue的创建与腾讯云的搭建有了一定的了解,基石已经搭好,Eknow君在这里还是建议多敲敲代码,兴许能发现新的坑位等着来铺哟。

近期文章:

  • 图文讲解Recyclerview的复用机制 || Recyclerview进阶

  • 冲击手机应用榜单Top3,高手都做了这些

  • 为什么?为什么程序员总是加班!!

今日问题:

你是如何开发小程序的?

留言格式:

打卡x 天,答:xxx。

参与打卡活动:

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表