小程序的开发制作和怎样快速搭建微信小程序

发布网友 发布时间：2022-04-20 04:11

我来回答

共9个回答

懂视网 时间：2022-05-15 04:51

这次给大家带来怎样进行mpvue小程序项目搭建，进行mpvue小程序项目搭建的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说可以达到小程序与H5界面使用一套代码。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。

Mpvue官网：http://mpvue.com/
demo地址 ：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

为什么要用mpvue

首先微信小程序推荐简洁的开发方式，通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地，通过微信客户端载入和启动，开发规范简洁，技术封装彻底，自成开发体系，本身定位为一个简单的逻辑视图层框架，官方并不推荐用来开发复杂应用，但业务需求却难以做到精简。复杂的应用对开发方式有较高的要求，如组件和模块化、自动构建和集成、代码复用和开发效率等，但小程序开发规范较大的限制了这部分能力。所以为了解决上述问题，提高开发效率，提供更好的开发体验，通过使用基于 Vue.js 的mpvue框架来开发微信小程序。

mpvue的特点

1. 彻底的组件化开发能力：提高代码

2. 完整的 Vue.js 开发体验

3. 方便的 Vuex 数据管理方案：方便构建复杂应用

4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

5. 支持使用 npm 外部依赖

6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

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

项目搭建

项目构成

1、采用mpvue 官方脚手架搭建项目底层结构
2、采用Fly.js 作为http 请求库
3、采用stylus作为项目css预处理工具。

项目框架结构和文件目录结构

主要关注应用程序代码所在的src目录

├── src // 我们的项目的源码编写文件
│ ├── components // 组件目录
│ │ └── head //导航组件
│ ├── config //公共配置
│ │ └── tips // 提示与加载工具类
│ ├── http //http请求配置文件
│ │ └── api // 接口调用文件
│ │ └── config //fly 配置文件
│ ├── pages //项目页面目录
│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义
│ ├── stylus //stylus css处理器目录
│ │ └── common.styl // 全局css样式
│ │ └── index.styl // stylus 出口
│ │ └── mixin.styl //mixin 方法
│ │ └── reset.styl //reset css
│ ├── untils //工具函数目录
│ │ └── index.js
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件

搭建过程

一、通过官方文档 快速创建一个小程序http://mpvue.com/mpvue/

# 全局安装 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目录，查看页面是否显示。

三、配置 fly

# npm安装 flyio
$ npm install flyio --save

1、在src下 创建 http目录 目录结构为：

 │ ├── http //http请求配置文件
 │ │ └── api.js // 接口调用文件
 │ │ └── config.js //fly 配置文件

2、config.js

//引入 fly
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly;
//配置请求基地址
// //定义公共headers
// fly.config.headers={xx:5,bb:6,dd:7}
// //设置超时
// fly.config.timeout=10000;
// //设置请求基地址
// fly.config.baseURL="https://wendux.github.io/"
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
 //给所有请求添加自定义header
 config.headers["X-Tag"]="flyio";
 return config;
})
// Vue.prototype.$http=fly //将fly实例挂在vue原型上
export default fly

3、api.js

import fly from './config'
import qs from 'qs'
// 配置API接口地址
let root ='接口域名';
/**
 * 接口模版====post
 *
 * export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};
 *
 * 接口模版====get
 *
 * export const test1 = function(){return fly.get(`${root}/api/getNewsList`)}
 *
 *
 * 用法：
 * 在 页面用引入 test
 * import {test} from '../../http/api.js'
 *
 * test(params).then(res=>{ console.log(res) })
 */
export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};

四、配置 stylus

# npm安装 flyio
$ npm install stylus --save-dev
$ npm install stylus-loader --save-dev

1、在src下 创建 stylus目录 目录结构为：

 │ ├── stylus //stylus css处理器目录
 │ │ └── common.styl // 全局css样式
 │ │ └── index.styl // stylus 出口
 │ │ └── mixin.styl //mixin 方法
 │ │ └── reset.styl //reset css

2、mixin.stylus

考虑到将来可能要复用到h5项目中 所以这里写了一个 单位转换的方法【px2rem】，并没有使用存在平台差异的rpx，以后即便迁移到web 端, 只需要处理【px2rem】的单位转换逻辑就好

// 单行显示省略号
no-wrap()
 text-overflow: ellipsis
 overflow: hidden
 white-space: nowrap
// 多行显示省略号
no-wrap-more($col)
 display: -webkit-box
 -webkit-box-orient: vertical
 -webkit-line-clamp: $col
 overflow: hidden
//rem转换 $px / 75 *1rem
px2rem($px)
 $px * 1rpx

3、index.stylus

@import "./mixin.styl"
@import "./reset.styl"
@import "./common.styl"

4、引入

在 app.vue 中引入

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
 @import "stylus/index.styl"
</style>

**如果要用到mixin.stylus中的方法，需要在页面的stylus文件中 单独引用 mixin.stylus

五 配置 config目录

1、在src下 创建 config目录 目录结构为：

│ ├── config //公共配置 
│ │ └── tips.js // 提示与加载工具类

2、tips.js

考虑到将来可能要复用到h5项目中 所以这里将微信提供的提示与加载框封装成工具类，以后即便迁移到web 端, 只需要删除tips.js的wx api就可以了。

可以在 main.js中引入，绑定到原型上

import Tips from './config/tip'
Vue.prototype.$tips=Tips

在页面中 this.$tips.alert("请输入手机号")调用

/**
 * 提示与加载工具类
 */
export default class Tips {
 constructor() {
 this.isLoading = false;
 }
 /**
 * 弹出提示框
 */
 static success(title, duration = 500) {
 setTimeout(() => {
 wx.showToast({
 title: title,
 icon: "success",
 mask: true,
 duration: duration
 });
 }, 300);
 if (duration > 0) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve();
 }, duration);
 });
 }
 }
 /**
 * 弹出确认窗口
 */
 static confirm(text, payload = {}, title = "提示") {
 return new Promise((resolve, reject) => {
 wx.showModal({
 title: title,
 content: text,
 showCancel: true,
 success: res => {
 if (res.confirm) {
 resolve(payload);
 } else if (res.cancel) {
 reject(payload);
 }
 },
 fail: res => {
 reject(payload);
 }
 });
 });
 }
 static toast(title, onHide, icon = "success") {
 setTimeout(() => {
 wx.showToast({
 title: title,
 icon: icon,
 mask: true,
 duration: 500
 });
 }, 300);
 // 隐藏结束回调
 if (onHide) {
 setTimeout(() => {
 onHide();
 }, 500);
 }
 }
 /**
 * 弹出加载提示
 */
 static loading(title = "加载中") {
 if (Tips.isLoading) {
 return;
 }
 Tips.isLoading = true;
 wx.showLoading({
 title: title,
 mask: true
 });
 }
 /**
 * 加载完毕
 */
 static loaded() {
 if (Tips.isLoading) {
 Tips.isLoading = false;
 wx.hideLoading();
 }
 }
 static share(title, url, desc) {
 return {
 title: title,
 path: url,
 desc: desc,
 success: function(res) {
 Tips.toast("分享成功");
 }
 };
 }
 static alert (text, ok) {
 if (ok === void 0) { ok = function (res) { }; }
 if (!text) {
 return;
 }
 wx.showModal({
 content: text,
 showCancel: false,
 confirmColor: '#000000',
 cancelColor: '#000000',
 success: ok
 });
 };
}
/**
 * 静态变量，是否加载中
 */
Tips.isLoading = false;

六、配置vuex

1、在src下 创建 store目录 目录结构为：

│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义

2、main.js中引入store, 并绑定到Vue构造函数的原型上，这样在每个vue的组件都可以通过this.$store访问store对象。

import store from './store'
Vue.prototype.$store=store;

3、state.js

在数据源文件中定义变量：

const state={
 test: 0,
}
export default state

4、mutation-types.js

在mutation-types.js中定义你的Mutation的名字

export const TEST = 'TEST' // 这是测试的

5、mutations.js

在mutations.js中写处理方法

import * as types from './mutation-types'
const matations={
 /**
 * state:当前状态树
 * data: 提交matations时传的参数
 */
 //是否有渠道
 [types.TEST] (state,data) {
 state.TEST = data;
 },
}
export default matations

6、使用方法

# 在 store index.js 中引入
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state'
import mutations from './mutations'
Vue.use(Vuex);
export default new Vuex.Store({
 state,
 mutations,
})

在页面中引用

7、将vuex中的数据持久化到本地 （使用vuex-persistedstate）

# 安装vuex-persistedstate
$ npm install vuex-persistedstate --save

在 store index.js 引入

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state'
import mutations from './mutations'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export default new Vuex.Store({
 state,
 mutations,
 plugins: [
 createPersistedState({
 storage: {
 getItem: key => wx.getStorageSync(key),
 setItem: (key, value) => wx.setStorageSync(key, value),
 removeItem: key => {}
 }
 })
 ]
})

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Vue.js实现表格增删步奏详解

如何使用PHP实现微信小程序人脸识别刷脸登录

热心网友 时间：2022-05-15 01:59

你如果想要快速搭建自己的小程序店铺的话，建议你可以借助小程序制作工具（如 得有店）来快速生成自己的小程序店铺。这种方式一般一周左右就可以实现小程序的上线使用。

热心网友 时间：2022-05-15 03:17

这几种版本的小程序您想搭建那种，都是可以做的。

热心网友 时间：2022-05-15 04:51

小程序的发展异常火爆，很多企业看好小程序的发展，都想搭建自己的小程序平台。但是找专业的公司去做一个小程序费用不菲，今天，分享如何快速完成小程序搭建，让你轻松搭建自己的小程序。

第一步：搭开发环境
首先，我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE，打开官网下载页面，根据自己的操作系统选择。
第二步：下载「小程序」源码
接下来，我们下载「小程序」的源码。可以选择直接从官网提供的链接下载，也可以从微信团队的 Github 仓库拉取。推荐从 Github 仓库拉取，这样可以及时获取最新的代码。
第三步：云端部署 server 代码
虽然服务端的开发不是本文的重点，但是为了全面地体验「小程序」的整个开发部署流程，我们还是有必要了解服务端的部署。
第四步：准备域名和配置证书
如果你已经有了服务器和域名，并配置好了 https，那么可以跳过第 4-6 步了。
在微信小程序中，所有的网络请求受到严格*，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名，可以先到先注册一个免费的域名，然后登录微信公众平台配置通信域名。
第五步：Nginx 配置 https
微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要修改配置中的域名、证书、私钥。配置完成后，重新加载配置文件并且重启 Nginx。
第六步：域名解析
我们还需要添加域名记录，将域名解析到云服务器上，这样才可以使用域名进行 https 服务。
第七步：启动「小程序」的服务端
进入相应目录，如果是你自己的服务器，请进入相应的文件夹启动。
第八步：配置「小程序」通信域名
接下来，在微信 web 开发者工具打开「小程序」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。然后点击调试，即可打开小程序Demo开始体验。

热心网友 时间：2022-05-15 06:43

开发小程序商城的前提首先要有营业执照，个体工商户和公司都可以，有了营业执照就可以注册并认证微信公众平台里面的小程序账号了，通过小程序账号的公共接口，可以对接开发出各种各样的功能。
1、有实力的企业可以根据自身的个性化需求，组件技术团队定制开发，一名程序员月薪起步1万，如果是大型商城系统，则需要5名以上技术人员参与，开发周期一般在3~6个月不等，后期需要有专人维护、更新和bug修复等；

2、如果是普通商家，没有充足的资金定制开发，并且也没有技术团队做支撑的，则可以选择世面上成熟的微信小程序商城系统，各项营销功能都是开发好的，并且根据时代更迭，不断的升级更新优化等，不需要自己懂技术，直接拿过来把小程序对接一下，这样自己的微信小程序，就瞬间有了商城功能，商家可以在管理后台操控整个商城的运作；
小程序搭建费用是根据自身情况而定，可以根据第三方开发公司提供的套餐进行选择，正常的市场价一般是3000~9000元，可以根据实际需要选择套餐功能；搭建周期在理论上最快的当天对接完成，但账号认证和微信支付开通一般需要2~3天，所以，如果已经准备好已认证的小程序账号的情况下，小程序就可以当日实现商城功能。当然，不懂注册认证账号也没关系，因为技术客服会全权代劳。

热心网友 时间：2022-05-15 08:51

目前要开发一个小程序有以下方式可以选择，比如：
1、小程序定制开发
小程序定制开发，顾名思义，就是根据客户的需求来定制开发小程序。针对有特殊的功能需求的客户而言小程序定制开发是最佳选择，因为小程序模板开发满足不了。而小程序定制开发需要耗费较长的时间、人力、物力，但开发出来的小程序是完全满足客户需求，与业务紧密相关，并且正规的小程序定制开发公司在小程序开发项目完成之后会交付源代码等，确保安全。
2、专业的第三方微信小程序开发公司，这类企业都有专门的技术团队和丰富的开发经验，商家只要把需求提供给公司，然后跟技术进行交流一下，把你的想法和需求说明，就可以开始了，而且这种开发方式开发价格较低，根据功能一般几千，或者一两万就可以实现，还有就是开发周期短。

热心网友 时间：2022-05-15 11:15

你如果想要快速搭建自己的小程序店铺的话，建议你可以借助小程序制作工具来快速生成自己的小程序店铺：
一、自己有多年的编程基础，自己学习，自己研究。
二、使用第三方小程序开发工具这种方式是使用第三方的小程序开发工具，比如我就是使用的牛刀云。这类工具一般都不需要编程。区别于微信小程序官方的代码编辑器，这类工具是图形化的界面。做小程序就像做PPT一样。把图片、文字、音乐等等东西插入，然后设置它们的效果，编辑好后，使用这类工具直接自动小程序代码，把生成的小程序代码上传到微信审核就可以上线自己的小程序了。

三、专业的微信小程序开发公司这类企业都有专门的技术团队和丰富的开发经验，商家只要把需求提供给公司，然后跟技术进行交流一下，把你的想法和需求说明，就可以开始了。

商家想要找第三方开发合作公司要综合的考察，因为互联网的发展日新月异，公司的发展时间，有没有实力，开发的小程序能不能够满足需求等问题一直困扰着客户。

热心网友 时间：2022-05-15 13:57

小程序开发制作有两种方式，目前快速搭建微信小程序如下：
1、定制开发公司，但是这种开发价格较高，上万，甚至十几万都有，还有就是开发周期较长，几个月，或者更长；
2、第三方平台开发，这种呢，开发价格较低，根据更能几千就可以实现，主要的是开发周期短，一个星期左右就可以上线运营，所以如要快速搭建，可以选择这一种。
可以根据自己的实际情况进行选择，希望以上可以帮到你，谢谢！

热心网友 时间：2022-05-15 16:55

目前开发一个小程序有两种方式：
1、定制开发公司，但是这种开发价格较高，上万，甚至十几万都有，还有就是开发周期较长，几个月，或者更长；
2、第三方平台开发，这种呢，开发价格较低，根据更能几千就可以实现，主要的是开发周期短，一个星期左右就可以上线运营，所以如要快速搭建，可以选择这一种。