前段时间某神秘企业员工被禁止拥有自媒体，所以如果大家在盗版网站或者某条看到这篇文章，而且昵称还叫什么泽哥**钊，不用慌，就是我！！！

我这技术这么烂，也要被限制，辛苦某某部门了。也不知道啥时候禁止我发博客。后续准备出一个详细版的小程序专栏。适合零基础同学。

———————————以下是正文—————————————

最近有人私信我小程序怎么做，报价是多少之类的话题。

首先明确一点，我肯定是不会接普通的私活，帮老板做经营性质的小程序，我想要做的是合作共赢的方式，具体细节有时间可以重开一篇文章详细讲讲诸如此类的话题：为什么有些人做小程序可以那么便宜，有些人却表示做不了。高喊着家人们不要当韭菜的商家，究竟有没有趁机割韭菜？

本篇的重点是如何最快捷地做一个只包含前端的小程序。

做小程序，你都需要准备什么

第一步：确定技术栈

不论哪种技术，只要能在市场中占据一席之地，那它必然有过人之处，只要还没有完全掌控市场，那它也必然有缺陷。所以一般拿技术栈来斗嘴的，大部分是大学生或者小公司职工，为啥？因为稍微上点规模的企业里，你没得选。

企业用啥你就得用啥，平台都是搭好的，技术可选择性只有面向不同场景的A和B，不会同一场景，让你去做多选。

我的技术栈选型是：uniapp+uview，工具是hbuilder+微信开发者工具。做工具类、信息展示类、动画交互类的小程序其实都可以不需要后端服务，当然我是因为服务器备案还没通过，没办法在生产环境部署后端。如果需要做后端服务，我选java或者nodejs，一个图稳，一个图爽。

第二步：准备必要的开发环境

这里只阐述重点环节，具体操作就不展开描述了。因为这些乱七八糟的其实并没有技术含量，但是篇幅可能还不短，自行百度或者根据官网去一步步做好就行。大致需要：

hbuilder的appid：每使用hbuilder创建一个项目都需要生成一个，这是hbuilder创建的，用于项目发布成app时需要填写的唯一标识。
微信小程序的appid：这是微信公众平台上申请的，配套的还有一个appSecret，用于在微信小程序系统内，为你的小程序做唯一标识。
微信公众号平台：使用邮箱申请账号，确定账号类型为小程序，然后设置自己的微信号为管理员，小程序账号绑定的是邮箱，管理员绑定的是微信号，即一个邮箱对应一个小程序，一个微信号可以管理多个小程序。
hbuilder中配置：配置微信开发者工具运行路径，方便直接运行到开发者工具中查看真机效果等。
微信开发者工具配置：主要配置右上角的详情，如图：

被我红色抹掉的，就是需要手动配置的。然后是本地配置，下图是我的配置可作参考，再看一眼设置里的服务端口有没有打开：

至此，与真正开发无关的准备工作已经完毕。

uniapp开发小程序

使用hbuilder创建空项目，vue版本建议选择vue2，decloud官网有一些模板项目，如果需求接近，也可以作为参考：

如果按照官网都配置好，那这个最简单的小程序就已经完成了。

创建项目后，直接运行在微信开发者工具，如果报错：Cannot read property ‘forceUpdate’ of undefined，说明微信小程序的appid没有配置，把自己申请的小程序appid拿过来，就能运行成功。

我用自己微信申请了一个测试号，编译然后真机运行，它是这样的：

打开过一次后，可以在小程序搜索页找到我们的测试小程序，如图：

至此，一个最简单的，只有一个页面的小程序就完成了。如果只是做个简单的企业展示页、小商店的活动信息展示之类的静态页面，那无非是多设计几个页面而已。

** 完结，撒花！！！**各位只需要展示页面的看官老爷可以离场了

如果你还有理想，想要实现更复杂的小程序，那么请继续阅读，一个项目级小程序还需要做哪些配置。

修改基础的配置文件和入口文件：

如果没有vue基础，建议只完成用作展示的静态页面就好，如果需要开发稍微复杂的逻辑，请先打好基础。

最好把es6、html、css这些都熟悉了，因为es6是理解模块化引入、promise对象、各种新语法的基础，html、css是修改组件的基础，uniapp和uview两个组件库有坑，尤其是uview框架，想要实现好的效果，经常需要修改源码。

配置文件要点：

pages.json:需要进行路由跳转的页面都需要在这里配置。
main.js：全局挂载的js工具都需要在这里配置。我的示例代码如下，为了方便浏览，删除了部分特例代码，整体分为三部分：引入资源（import）、挂载资源（prototype）、按要求使用插件（use），理解有困难就把我代码抄过去，增增减减做一个自己的，不过我觉得我用到的已经是开发必备的工具类了。

import Vue from 'vue'
import App from './App'
import lodash from 'lodash'
import uviewAdapter from '@/common/util/uview-adapter';// vuex
import store from './store'// 引入全局uView
import uView from '@/uni_modules/uview-ui'import mixin from './common/mixin'
import * as config from './common/config.js'
import {util
} from './common/util.js' //自己写的工具类//引入的资源挂载到全局属性上
Vue.prototype.$store = store
Vue.prototype.$util = util
Vue.prototype.$config = config
Vue.prototype._ = lodash
Vue.prototype.$uview = uviewAdapterVue.config.productionTip = falseApp.mpType = 'app'
Vue.use(uView)Vue.mixin(mixin)const app = new Vue({store,...App
})
// 引入请求封装
require('./common/request/index')(app) app.$mount()

app.vue:需要按照uview的要求增加两个全局样式，代码如下：

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-ui/index.scss";@import "@/common/css/ui/uni-my.scss"</style>

基本配置完成后，需要写一些自己的工具类、请求拦截、响应拦截这些，篇幅过长，不展开讲解了，参考uview和uniapp官网自行配置吧。

项目实战

我们把所有的环境准备、代码准备、工具准备等等工作都完成了，剩下的无非就是写代码逻辑了，对于大部分程序员来说，这应该是最熟悉的吧。

因为小程序正式上线，后端服务必须是备案过的域名，我的私人备案审核还没结果，所以也只能做些不需要后端的小工具了。

依托上面搭好的架子，我这两周抽时间做了两个小工具，

第一个工具——翻译工具：

支持简体中文、繁体中文、英文、韩文、日文之间的互译，大家可以微信搜索**“李泽的工具包”**自行体验，如图所示：

第二个工具——时间戳转换：

当前时间转换为时间戳，选择时间转换为时间戳，同样搜索**“李泽的工具包”**可体验，如图所示：

大家如果有什么建议，或者平时想用的小工具，但是又都需要收费，可以私信或者评论区留言，我会综合考虑时间成本、价值之后，决定是否采纳并开发。

做一个纯前端小程序，只需要简单几步相关推荐

零基础做一个微信答题小程序(四)
嗨!大家好,我是小蚂蚁.这一节里,我们继续分享如何在答完题后进行答案的比对,以及如何实现一个回顾功能. 在上一节里我们提到过,为了记录玩家的答题数据,我们创建了一个新的表格--玩家答题选项表,里面记录 ...
如何做一个基于微信小程序的打卡签到
要做一个基于微信小程序的打卡签到系统,可以按照以下步骤进行: 创建小程序:在微信公众平台上注册小程序账号,创建一个新的小程序. 设计打卡签到功能:根据需求,设计打卡签到的功能模块,包括签到按钮.签到时 ...
ai绘画知识：做一个AI绘画小程序要花多少钱？
ai绘画彻底火了,赛道一度火过了当年的短视频行业.目前AI绘画以依托于微信小程序为主.如数画.意间.无界版图.灵境.6PEN.盗梦师这些AI绘画小程序清一色是10月份后上线.仅仅两月时间,但都已圈的用 ...
微店铺是什么？做一个微店铺小程序的流程
微店铺是什么? 微店铺是指在微信平台上主要通过微信小程序方式创建的一个在线店铺.微店铺和传统的电商平台相比,具有更低的成本.更好的管理.更便捷的体验等优点,同时也有利于商家与用户之间的互动和沟通. 如 ...
uniapp使用网易有道词典接口做一个背单词小程序-单词发音-有道词典接口-不用注册token直接发请求
uniapp使用网易有道词典接口做一个背单词小程序(不用注册token直接发请求) uniapp使用网易有道词典接口做一个背单词小程序-单词发音-有道词典接口用到的接口: *1.获取单词发音(goo ...
linux编程闹钟小程序,如何做一个番茄闹钟小程序
一创建 1. 开发工具下载 2. 创建一个小程序在开发工具中点击创建小程序,可以得到一个默认目录结构的小程序 3. 目录结构 pages 用于应用视图层的文件夹,便于路由设置 app.js 应用主 ...
案例-做一个酒店预定小程序用的日期选择案例
今天给大家分享一个酒店预定小程序用的日期选择案例,我是做的支付宝小程序,如果需要应用到微信小程序,请将相关字眼改成微信用的字眼,比如onTap改bindtap,a:if或者a:for改成wx:if和w ...
哟，2020年了！试着用vue做一个自己的小程序吧~~
Table of Content 前言 1. 生命周期 1. Vue的生命周期 2. 微信小程序页面生命周期 3. uni-app生命周期 1. 应用生命周期 2. 页面生命周期 2. 项目搭建 1. ...
哟，2020 年了，用 Vue 做一个自己的小程序吧！| 原力计划
作者 | End_less_,责编 | 夕颜来源 | CSDN博客头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 前言今天,我们来学习一下如何使用vue进行微信 ...

做一个纯前端小程序，只需要简单几步