最近有人私信我小程序怎么做，報價是多少之類的話題。

首先明確一點，我肯定是不會接普通的私活，幫老板做經營性質的小程序，我想要做的是合作共贏的方式，具體細節有時間可以重開一篇文章詳細講講諸如此類的話題：為什么有些人做小程序可以那么便宜，有些人卻表示做不了。高喊著家人們不要當韭菜的商家，究竟有沒有趁機割韭菜？

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

做小程序，你都需要準備什么

第一步：確定技術棧

不論哪種技術，只要能在市場中占據一席之地，那它必然有過人之處，只要還沒有完全掌控市場，那它也必然有缺陷。所以一般拿技術棧來斗嘴的，大部分是大學生或者小公司職工，為啥？因為稍微上點規模的企業里，你沒得選。

企業用啥你就得用啥，平臺都是搭好的，技術可選擇性只有面向不同場景的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拿過來，就能運行成功。

我用自己微信申請了一個測試號，編譯然后真機運行，它是這樣的：

打開過一次后，可以在小程序搜索頁找到我們的測試小程序，如圖：

至此，一個最簡單的，只有一個頁面的小程序就完成了。如果只是做個簡單的企業展示頁、小商店的活動信息展示之類的靜態頁面，那無非是多設計幾個頁面而已。

完結，撒花！！！各位只需要展示頁面的看官老爺可以離場了

如果你還有理想，想要實現更復雜的小程序，那么請繼續閱讀，一個項目級小程序還需要做哪些配置。

2.修改基礎的配置文件和入口文件：

如果沒有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 = uviewAdapter

Vue.config.productionTip = false

App.mpType = 'app'
Vue.use(uView)

Vue.mixin(mixin)

const app = new Vue({
    store,
    ...App
})
// 引入請求封裝
require('./common/request/index')(app) 

app.$mount()

3.app.vue:需要按照uview的要求增加兩個全局樣式，代碼如下：

<style lang="scss">

/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */

@import "@/uni_modules/uview-ui/index.scss";

@import "@/common/css/ui/uni-my.scss"

</style>

4.基本配置完成后，需要寫一些自己的工具類、請求攔截、響應攔截這些，篇幅過長，不展開講解了，參考uview和uniapp官網自行配置吧。