沒有基礎也能寫個小程序
文章記錄了小程序的設計思路，介紹了使用的技術，描述了提交審核的故事，還提供了最終的完整源碼
背景說明
微信小程序自從發布以來就占據著超高的話題熱度，一直以來都想開發一款自己的小程序，但苦於不懂前端遲遲沒有開始。偶然發現了ColorUI這個開源的小程序組件庫，界面好看且提供Demo，心中狂喜馬上動手
做個什麽小程序呢？想了一圈這半年多一直堅持在寫技術文章，為此開通了微信公眾號，因為公眾號查看文章列表不友好，且不方便在微信以外的渠道傳播，我又利用Github Pages搭建了運維咖啡吧網站主頁，就想做個類似於網站主頁的小程序吧，可以在微信體系內優化公眾號文章列表頁讀取以及方便分類檢索
開發過程
計劃參考運維咖啡吧網站主頁寫個小程序頁面來展示微信公眾號內的所有文章，後邊加上搜索、標簽等方便檢索，用戶點擊列表後跳轉到微信公眾號具體的文章查看，形成閉環
首先寫了個“列表”頁，用來展示公眾號內的所有文章，但寫完列表後發現小程序並不支持跳轉到公眾號的文章，不能查看文章這個小程序的意義就失去了大半
然後添加了一個“關於”頁面，頁面內介紹小程序是幹嘛的順便給個公眾號入口，方便對文章感興趣的朋友繼續閱讀
代碼完成後提交給小程序審核，約半天時間反饋審核失敗，原因是“實際運營內容與名稱簡介不符”，想著可能審核的夥伴不知道運維是幹嘛的，看到名稱裏包含咖啡吧，以為是跟咖啡相關的，反饋解釋了一下什麽是運維，以及小程序跟公眾號的關系，再次提交審核，又等了半天功夫，還是反饋審核失敗，這次原因是“小程序進入點擊頁面內容無反應”，我就寫了個列表頁，列表內容並不能點，這不是BUG，又反饋了一次但很遺憾跟上次一樣的原因依然審核失敗，看來必須得能點
決定添加一個“詳情”頁面，並不準備在詳情內放文章的詳細內容，因為這涉及到以往文章數據整理以及需要提供後端接口等問題，只想著能夠審核通過，所以簡單展示了文章的基本內容，給了個跳轉到公眾號的按鈕
編碼完成再次提交審核，順利通過
所用技術
下邊介紹一下這個小程序中用到一些技術點
for循環展示
列表頁面的展示采用了for循環讀取JS數據
JS裏邊用一個Blogs變量來記錄文章列表頁的數據，JS裏邊定義的變量可以直接在模板渲染時引用
Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, Blogs: [ { "title": "Django內置權限擴展案例", "image": "https://ws1.sinaimg.cn/large/7164c73agy1g0vl4k4veej20zk0f841d.jpg", "description": "當Django的內置權限無法滿足需求的時候", "url": "https://mp.weixin.qq.com/s/BZsJnWLtv8ZwwlBYbWSbZQ", "tag": "Django" }, { "title": "我們自研的那些Devops工具", "image": "https://ws1.sinaimg.cn/large/7164c73agy1g0vl4wtqdfj20zk0k00ve.jpg", "description": "隨著雲技術以及容器技術的崛起，人肉運維的時代結束了", "url": "https://mp.weixin.qq.com/s/HwOi-ARTvvNjGTWrDmZIkQ", "tag": "DevOps" } ] } })
模板渲染時用到了循環標簽wx:for，可以讀取JS變量的列表值，然後通過{{item}}拿到列表中的每個對象，再通過{{item.key}}拿到對象的值
<view bindtap="toChild" data-blog="{{item}}" class="cu-item shadow" wx:for="{{Blogs}}" wx:key>
<view class="title">{{item.title}}</view>
<view class="content">
<image src="{{item.image}}" mode="aspectFill"></image>
<view class="desc">
<view class="text-content"> {{item.description}}</view>
<view class="flex justify-between">
<text class="text-xs text-gray">原創：37丫37</text>
<view class="bg-right cu-tag bg-green light sm round">{{item.tag}}</view>
</view>
</view>
</view>
</view>後端取數據
考慮到文章可能會隨時增加，將數據直接寫在JS裏邊並不友好，每次變更還要重新發布審核，所以從後端接口讀取數據才是最好的方式，但考慮到成本問題沒必要專門寫個後端程序來處理，直接將內容存json，提供https訪問即可
在頁面加載的時候去後臺請求數據，然後給設置成變量Blogs，頁面渲染參考上邊介紹
onLoad: function () {
var that = this;
wx.request({
url: 'https://ops-coffee.cn/blog.json',
header: {
'content-type': 'application/json'
},
//請求後臺數據成功
success: function (res) {
that.setData({
Blogs: res.data.data
})
}
})
}頁面跳轉
點擊列表內容跳轉到詳情頁該怎麽實現呢？
我們先來看看跳轉，跳轉可以直接通過navigator標簽實現，open-type指定跳轉方式，url指定跳轉的頁面
<navigator open-type="navigate" url="/pages/index/detail/detail?data={{item}}" class="cu-item shadow" wx:for="{{Blog}}" wx:key>
<view class="title">{{item.title}}</view>
...
</navigator>或者通過bindtap事件觸發wx.navigateTo實現跳轉，data-blog可以指定bindtap事件參數，從而在JS中獲取
<view bindtap="toChild" data-blog="{{item}}" class="cu-item shadow" wx:for="{{Blogs}}" wx:key>toChild(event) {
var blog = event.currentTarget.dataset.blog;
wx.navigateTo({
url: '/pages/index/blog/blog'
})
}本地存儲
當點擊列表內容跳轉到詳情頁，正常的做法應該是去後臺請求文章的詳情以渲染詳情頁面，但這裏我需要展示的內容列表頁已經存在了，無需再次請求就找了個偷懶的做法，在用戶點擊列表內容時，把這篇文章的詳細信息利用wx.setStorageSync存儲在本地
toChild(event) {
var blog = event.currentTarget.dataset.blog;
wx.setStorageSync(
'blog',blog
);
}然後在詳情頁加載時利用wx.getStorageSync取出來渲染到頁面
onLoad: function (option) {
var blog = wx.getStorageSync('blog');
this.setData({
blog:blog
})
},關聯公眾號
小程序提供關聯公眾號的功能，需要先在小程序後臺：設置->關註公眾號中開啟公眾號關註組件，然後在頁面的相應地方添加上如下代碼就可以像文章詳情頁最下邊一樣出來個關聯公眾號的組件
<official-account></official-account>但訪問時可能會發現打開詳情頁並沒有出現關聯公眾號的組件，這個主要是因為並非所有的情況下都會展示，只有用對了姿勢才能看到，官方文檔有更多介紹，目前還沒有辦法徹底解決看不到的問題
頁面分享
小程序上線後我想分享給朋友裝逼，確發現沒有方便的方式，查官方文檔發現可以用onShareAppMessage方法，只需簡單的添加到想分享頁面的JS中即可，然後在右上角的功能按鈕中就會出現轉發功能
onShareAppMessage() {
return {
title: '運維咖啡吧',
path: '/pages/index/list/list'
}
}源碼地址
https://github.com/ops-coffee/demo/tree/master/miniprogram
寫在最後
- 感謝ColorUI，如此優秀的項目才能讓我沒有基礎的情況下快速開發一款小程序
- 此項目從開發到完成大概只花了1天的時間，比較簡陋，學習小程序的實驗項目，各位輕噴
- 對於框架的學習我的做法是先看一遍官方文檔的介紹，了解基本的內容，能看得懂項目結構，然後再開始編碼
如果你覺得文章不錯，請點右下角【好看】。如果你覺得讀的不盡興，推薦閱讀以下文章：
- 我們自研的那些Devops工具
- python如何幫我在投資中獲取更高收益
沒有基礎也能寫個小程序