做一個純前端小程序,只需要簡單幾步

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

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

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

做小程序,你都需要准備什麽

  • 第一步:確定技術棧

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

企業用啥你就得用啥,平台都是搭好的,技術可選擇性只有面向不同場景的A和B,不會同一場景,讓你去做多選。

我的技術棧選型是:uniapp+uview,工具是hbuilder+微信開發者工具。做工具類、信息展示類、動畫交互類的小程序其實都可以不需要後端服務,當然我是因爲服務器備案還沒通過,沒辦法在生産環境部署後端。如果需要做後端服務,我選java或者nodejs,一個圖穩,一個圖爽。

  • 第二步:准備必要的開發環境

這裏只闡述重點環節,具體操作就不展開描述了。因爲這些亂七八糟的其實並沒有技術含量,但是篇幅可能還不短,自行百度或者根據官網去一步步做好就行。大致需要:

  1. hbuilder的appid:每使用hbuilder創建一個項目都需要生成一個,這是hbuilder創建的,用于項目發布成app時需要填寫的唯一標識。
  2. 微信小程序的appid:這是微信公衆平台上申請的,配套的還有一個appSecret,用于在微信小程序系統內,爲你的小程序做唯一標識。
  3. 微信公衆號平台:使用郵箱申請賬號,確定賬號類型爲小程序,然後設置自己的微信號爲管理員,小程序賬號綁定的是郵箱,管理員綁定的是微信號,即一個郵箱對應一個小程序,一個微信號可以管理多個小程序。
  4. hbuilder中配置:配置微信開發者工具運行路徑,方便直接運行到開發者工具中查看真機效果等。
  5. 微信開發者工具配置:主要配置右上角的詳情,如圖:
做一個純前端小程序,只需要簡單幾步

被我紅色抹掉的,就是需要手動配置的。然後是本地配置,下圖是我的配置可作參考,再看一眼設置裏的服務端口有沒有打開:

做一個純前端小程序,只需要簡單幾步
做一個純前端小程序,只需要簡單幾步

至此,與真正開發無關的准備工作已經完畢。

uniapp開發小程序

  1. 使用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';// vueximport store from './store'// 引入全局uViewimport 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 = storeVue.prototype.$util = utilVue.prototype.$config = configVue.prototype._ = lodashVue.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()

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官網自行配置吧。

項目實戰

我們把所有的環境准備、代碼准備、工具准備等等工作都完成了,剩下的無非就是寫代碼邏輯了,對于大部分程序員來說,這應該是最熟悉的吧。

因爲小程序正式上線,後端服務必須是備案過的域名,我的私人備案審核還沒結果,所以也只能做些不需要後端的小工具了。

依托上面搭好的架子,我這兩周抽時間做了兩個小工具,

第一個工具——翻譯工具:

支持簡體中文、繁體中文、英文、韓文、日文之間的互譯,大家可以微信搜索“李澤的工具包”自行體驗,如圖所示:

做一個純前端小程序,只需要簡單幾步

第二個工具——時間戳轉換:

當前時間轉換爲時間戳,選擇時間轉換爲時間戳,同樣搜索“李澤的工具包”可體驗,如圖所示:

做一個純前端小程序,只需要簡單幾步

大家如果有什麽建議,或者平時想用的小工具,但是又都需要收費,可以私信或者評論區留言,我會綜合考慮時間成本、價值之後,決定是否采納並開發。