沒有基礎也能寫個小程序

文章記錄了小程序的設計思路，介紹了使用的技術，描述了提交審覈的故事，還提供了最終的完整源碼

背景說明

微信小程序自從發佈以來就佔據着超高的話題熱度，一直以來都想開發一款本身的小程序，但苦於不懂前端遲遲沒有開始。偶然發現了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'
    }
}
複製代碼

源碼地址

長按文末二維碼關注微信公衆號【運維咖啡吧】回覆"03"可獲取源碼地址，期待你的到來

寫在最後

1. 感謝ColorUI，如此優秀的項目才能讓我沒有基礎的狀況下快速開發一款小程序
2. 此項目從開發到完成大概只花了1天的時間，比較簡陋，學習小程序的實驗項目，各位輕噴
3. 對於框架的學習個人作法是先看一遍官方文檔的介紹，瞭解基本的內容，能看得懂項目結構，而後再開始編碼

---

若是你以爲文章不錯，請點右下角【好看】。若是你以爲讀的不盡興，推薦閱讀如下文章：

• 咱們自研的那些Devops工具
• python如何幫我在投資中獲取更高收益