用mpvue构建微信小程序

背景

由于机器人协会进行鼓励大家多读书的活动,所以为了可以更好的、更有效果,所以我跟会长提了一个建议,做一个微信小程序,那么为什么是微信小程序呢?

1、现在微信小程序比较好,用户也比较多;利用微信小程序做推广,效果好;

2、小程序的痛点在于不需要在手机里额外安装app,利用微信提供的入口,用时扫码,用后清除;

3、开发周期与开发难度小于原生app。

技术栈

采用前后端分离

1、Vue全家桶

2、mpvue

3、koa2+mysql

构建过程

1、安装工作

a)安装好node

b)安装vue-cli

c)安装mysql

2、前端构建

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

3、后端构建

a)腾讯云的配置

腾讯云支持

b)本地导入node代码

wafer2-startup,将其中的server文件夹放到项目目录下。

配置server——config.js

const CONF = {
      // 其他配置 ...
    serverHost: ‘localhost‘,
    tunnelServerUrl: ‘‘,
    tunnelSignatureKey: ‘27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89‘,
      // 腾讯云相关配置可以查看云 API 秘钥控制台:https://console.cloud.tencent.com/capi
    qcloudAppId: ‘您的腾讯云 AppID‘,//[账户信息](https://console.qcloud.com/developer)
    qcloudSecretId: ‘您的腾讯云 SecretId‘,//[获取地址](https://console.qcloud.com/cam/capi)
    qcloudSecretKey: ‘您的腾讯云 SecretKey‘,//[获取地址](https://console.qcloud.com/cam/capi)
    wxMessageToken: ‘weixinmsgtoken‘,
    networkTimeout: 30000
}

4、test

/routes/index.js

//注册demo路由
router.get(‘/demo‘, controllers.demo)

/controllers/demo.js

module.exports = async (ctx)=>{
    ctx.state.data = {
        msg: ‘hello, 小程序后台‘
    }
}

5、本地环境搭建

a)在命令行执行新建默认名为cAuth的数据库

b)npm install -g nodemon

c)进入server目录,开启server

6、打开微信开发工具,新建并导入项目

项目目录

7、test结果

本地运行

git clone
npm install
npm run dev

原文地址:https://www.cnblogs.com/Jomsou/p/9161747.html

时间: 2024-11-10 16:01:49

用mpvue构建微信小程序的相关文章

mpvue体验微信小程序开发

微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 概览 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式. 使用公众号网页调试,开发者可以调试微信网页授权和微信

Python Flask构建微信小程序订餐系统

call--->q-2304636824-q 第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆https://food.54php.cn(使用微信扫码二维码体验下哦横须)一起来演示一下项目.本次课程是严格按照商业系统进行架构开发的,从PC管理员端到小程序会员端,从项目搭建到部署上线,通俗易懂.... 1-1 导学--Python Flask 构建微信小程

mpvue搭建微信小程序

最初,我电脑已经搭建成功相应的环境配置,于是可以直接创建微信小程序,如第一次,可参考https://www.cnblogs.com/donglt-5211/p/9369098.html搭建 步骤一:创建一个基于 mpvue-quickstart 模板的新项目 vue init mpvue/mpvue-quickstart my-wechat 步骤二:依次运行 cd my-wechat, npm install ,npm run dev; 步骤三:已经生成了------小程序代码的目录,文件夹"d

使用gulp构建微信小程序工作流

前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生工具的条条框框,把近些日子学的东西都拿出来熬一熬. 已有的一个小程序项目使用了github上一个使用webpack.babel.sass开发的小程序脚手架(wxapp-boilerplate),我需要在不变动原有项目代码的基础上,使用gulp来重构项目的工作流. 使用体验:使用vscode配合各种插

用mpvue写微信小程序时,webview跳转外部链接,再跳转回来需要点两次返回箭头才能跳转

问题描述: 给公司做微信小程序时遇到了这个问题,用mpvue框架搭建的小程序,从首页点击进去,先跳转到一个中间页面,在中间页面放上webview链接到外部的H5页面,这时点击小程序左上角自带的返回按钮,第一次会跳转到空白页,再点一次才能跳转到首页. 首页: 详情页: 这时需要点击左上角的返回箭头两次,才能跳转到首页 解决办法: 小程序跳到外部页面方法: 1.从首页(index)跳转到中间页(template): goPage(id){ wx.navigateTo({url:'../templat

mpvue开发微信小程序

1. 安装 mpvue的开发依赖于vue-cli脚手架,使用vue-cli脚手架搭建项目.当然,在这之前你得先安装node环境 node安装传送门 全局安装 npm install vue-cli -g 需要的工具:微信开发工具 下载地址 ,如果不习惯使用微信开发工具开发也可以使用VScode开发,使用微信开发工具查看运行结果,VScode也有很难躲好用的插件 2.创建基于mpvue的小程序项目 vue init mpvue/mpvue-quickstart my-project 其中my-pr

初识MpVUE开发微信小程序踩坑记录

安装预览的时候,不是用浏览器打开输入:localhost:8080. 而是打开微信开发者工具,把项目根目录导入进去. 坑一:不支持Vue-router 之前vue项目直接移入,同步生成小程序不能使用vue-router 坑二:eslint连vue和js后缀文件都有严格校验 找到build目录的webpack.base.conf.js把器rule注释掉. // { //   test: /\.(js|vue)$/, //   loader: 'eslint-loader', //   enforc

PythonFlask构建微信小程序订餐系统

第1章 课程介绍课程介绍 第2章 netty介绍与相关基础知识初识netty,学习阻塞与非阻塞,同步与异步,理解BIO.NIO.AIO以及netty的线程模型 第3章 使用netty编写第一个hello netty 服务器从零开始使用netty编写服务器,在网页访问后返回hello netty,主要对服务器启动类,channel初始化器以及助手类讲解,最后会对channel的生命周期进行讲解 第4章 使用netty构建websocket服务器理解实时通信,使用netty的websocket编写服

Python Flask构建微信小程序订餐系统 学习 资源

一.Flask MVC框架结构 1.1实际项目结构 1.2application.py  项目配置文件 Flask之flask-script模块使用 static.py 文件(部署到生成环境不需要这个文件,只是解决本地静态文件无法加载问题)   1.3.manager.py 启动文件   1.4.login.py    1.5.requirements.txt 项目依赖库文件管理 二.链接统一与版本管理 建立统一的URL管理函数,让URL可以方便修改.重构与扩展    三.账号功能模块示意图