怎样创建自己的小程序

发布网友

我来回答

共10个回答

懂视网

这次给大家带来怎样进行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实现微信小程序人脸识别刷脸登录

热心网友

1、打开微信小程序开发工具，用微信扫码登录开发者工具，登录完成后，就可以开始创建小程序了。

2、首先点击小程序右侧的“+”号，进入小程序的“新建项目”页面。

3、在新建项目页面看到，要填写“AppID”。此时，可以在微信公众平台登录账号，登录之后，在页面左边找到“开发”，点击进入，然后找到“开发设置”，打开以后就可以看到AppID了。

4、然后在新建项目页面填写好APPID后，点击右下方的“新建”，就完成了项目创建了。

热心网友

第一步 注册小程序

第二 制作小程序

这里说下为什么要用速成应用来为大家做演示：速成应用不仅提供了海量的精美模板，还把小程序的页面拆分成诸如社区模块、电商模块、预约模块、餐饮门店、拼团秒杀等多个功能模块组合，也可以将功能模块拆分成大量更细致的组合，让一些不想套用模板又想省力的用户可以使用各个组合或者功能模块组装成一个新的小程序页面，继而制作出一个全新的微信小程序。

1.首先访问「速成应用」创建一个账号 账号创建好之后点击制作

点击“制作”，选择“空白模板”即可进入编辑页面。

进入编辑页面，可以看到左侧一栏的【组件库】。下面以"轮播banner"为例：添加“轮播”，点击“管理轮播图分组”往里图片，完成一个布局后保存，点击预览可以查看刚刚添加效果！(使用上有任何不懂的可以直接咨询他们客服)

添加店铺名称和导航，首页先点击左侧自由面板，然后选择文本进行编辑文字，导航图片点击左侧“图片”然后直接拖拽到“自由面板”空白的地方替换图片，修改尺寸就可以了。地图导航链接，点击事件，调用功能选择“地图导航”，添加之前先到地图管理里面添加地址

图片列表添加，点击左侧“图片列表”点击添加图片，先填写表填，然后点击更好图片，布局和排版更具自己的喜好来设计！

点击预约到店里的“技师列表”显示数量设置好，点击管理对象，跳转到后台添加技师基础设置、预约设置、详情页样式设置，保存后前端预览就能显示出来了。

底部导航设置：点击底部导航，然后点击“添加”设置底部导航图片和描述，替换设置好图片和描述，点击链接至“预约”然后保存就OK了.

其他子页面点击右下角，添加页面或添加分组，其他操作或设置跟主要操作基本一样的。

编辑好页面以后，建议大家先点击保存，然后再点击上方的「管理」进入后台。看到左侧的后台功能列表，用户可以找到部分对应的模块上传数据。比如进入页面数据，展示的是用户制作好的页面。在这里可以添加店铺设置，服务管理，订单管理等

当前端和后台都调整好后，回到小程序编辑页面点击右上角的「保存」，然后「预览」看页面显示效果，确定界面显示没问题后点击右上角的「发布」，会自动跳转到后台，此时我们进行打包上传，选择微信小程序，可以选择一键上传至微信公众平台，直接登录小程序后台提交审核，或者下载代码包自己通过开发者工具上传。

上传好后，等待微信平台那边审核通过就可以发布啦，发布后就可以在微信搜索到专属你的微信小程序了。是不是特别简单？赶快来试试看吧~

有一点要给大家普及一下哦 ：目前开发小程序的第三方平台都是要收费的哦，一些打着免费的平台，最后花的钱可能更多哦，速成应用 这家 算是市面上综合性价比比较高的平台，大家可以多了解对比下

热心网友

创建自己的小程序主要有以下这些流程：

商家一共有两种方式可以拥有自己的小程序：

1.第一种为自主开发，商家可以自行找设计师、找产品、找技术，学习微信接口文档，经过漫长的开发周期，不定期的技术接口升级，花费昂贵的开发费用来拥有小程序。虽然开发门槛相对较低，难度不及APP，但自己要开发一个小程序也需要2-3个技术人员耗费数万元以及若干月来实现，且实现后功能需要不断完善迭代，代价较高也耗费精力。

2.另一种方式，商家可以使用有赞的小程序功能，无需商家自行开发，即可享受专业的技术服务和丰富的营销工具，助力商家轻松获客，更支持商家个性装修及海量模板套用两种装修方法，省心省时。为商家免去了自己开发的繁杂过程，仅需按照注册流程即可快速拥有属于自己的小程序店铺。同时为小程序提供丰富多样的营销功能和展示组件，满足商家的各项场景需求和功能需求。

热心网友

您好，
“微信小程序”开发之前必须要完成和注册认证。如果是个人或者小公司想开发微信小程序，也可以找微信认证第三方开发商，比如赢在移动、正品科技等。
1、微信小程序注册
在微信公众平台官网首页，按照提示点击右上角的“立即注册”按钮，里面总过有12步，按照要求提交就可以了。
2、小程序申请微信认证
*、媒体、其他组织类型帐号，必须通过微信认证验证主体身份。企业类型帐号，可以根据需要确定是否申请微信认证。已认证帐号可使用微信支付、微信卡券等高级权限。
认证入口：登录小程序—设置—基本设置—微信认证—详情
3、小程序申请微信支付
已认证的小程序可申请微信支付。
4、小程序绑定微信开放平台帐号
小程序绑定微信开放平台帐号后，可与帐号下的其他移动应用、网站应用及公众号打通，通过UnionID机制满足在多个应用和公众号之间统一用户帐号的需求。
UnionID机制说明：如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序)，可通过UnionID来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序)，用户的unionid是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。用户的UnionID可通过调用“获取用户信息”接口获取。
5、了解“获取用户信息”接口请查看开发文档—API—开放接口—用户信息。
绑定小程序流程说明：登录微信开放平台、—管理中心—公众帐号—绑定公众帐号
注意：微信开放平台帐号必须完成开发者资质认证才可以绑定小程序。

热心网友

一、注册阶段
1、首先你要确定小程序的定位、目的以及文案资料等（准备工作）。
2、打开微信公众平台官网，点击右上角的“立即注册”
3、在“选择注册的类型中”选择“小程序”
4、完善账号信息
5、邮箱激活公众平台账号
6、完善信息登记。按照流程信息填写完成后则代表认证成功，这时则可以开始创建小程序了
二、开发阶段
1、登录微信公众平台。就能在菜单“开发”、“基本配置”中看到小程序的AppID了。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID 。有了小程序帐号之后，就可以选择工具来开发小程序了。
2、前往“开发者工具”下载页面，安装“开发工具”，开发工具有windows、windows32、mac三个版本，可根据实际情况，选择适合自己电脑的开发工具。安装后，就可以直接启动开发者工具了。
3、在小程序管理页面，点击“添加项目”
4、填入申请到的小程序的AppID、项目名称
5、然后点击“选择”，新建一个文件夹作为新的项目目录。再次点击“添加项目”，就可以新建出一个微信小程序项目了。懂程序的可以依靠开发者工具自行开发。但是如果你只是个小白，那你可能就需要专业的小程序制作开发平台来帮你比如沃然建站平台。
6、制作完成的小程序提交审核，一般待7-14个工作日审核通过后你就可以拥有自己公司的微信小程序了。

热心网友

个人小程序，付费就可以给你开发。只有是合法的就行

热心网友

首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的AppID。 利用提供的帐号，登录微信 ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的AppID了。
注意：如果我们不是用注册时绑定的管理员*，在手机上体验该小程序。那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的*。本教程默认注册帐号、体验都是使用管理员*。

热心网友

光创建是没用的，还需要经过《天客通》进行开发才可以实现高级功能。

热心网友

专门开发小程序的量川科技很高兴为您服务：“
1、小程序分为个人和企业，但目前仅支持企业小程序开通支付功能。
2、创建企业的小程序需要个体商户或者企业的营业执照。”
3、申请注册小程序首先打开腾讯小程序官网，
点击立即注册 →→ 小程序申请微信认证 →→ 小程序申请微信支付 →→ 小程序绑定微信开放平台帐号 →→ 了解“获取用户信息”接口请查看开发文档—API—开放接口—用户信息。
4、第四步是找小程序公司帮你开发小程序。
\\注释，目前一般都是小程序开发公司整套流畅帮客户搞定所有的程序，所有无需担心注册问题。