原生微信小程式+雲開發，原始碼給你們多久能開流量主？（上）

語言: CN / TW / HK
時間 2022-07-10 03:15:14

theme: cyanosis

前言

我為什麼要記賬？月光、明明自己不怎麼花錢、錢錢去哪兒了？

年輕人現在的消費方式大多都是月光族，一個月下來根本存不了什麼錢，我覺得記賬就是非常好的一個方式來讓年輕人知道自己把錢花在哪裡，改變消費方式。記賬並不會讓我變得更節省，積攢更多的錢。 但它讓我知道自己的錢花在了哪，每個月自己在哪方面花錢最多，這個月比上個月花錢的增減情況，從而窺見數字背後的意義。

於是作為程式猿，那不得自己寫一個玩一下。說幹就幹，想著小程式雲開發前後端都可以自己來，雲開發無需搭建伺服器，可快速構建小程式、公眾號，免登入、免鑑權呼叫微信開放服務，按量計費，成本更低，這不是前端同學的首選嗎？本文寫的是一個已經開了流量主，沒加廣告的小程式。

戰術準備

  • 後端：微信雲開發（雲函式、雲資料庫）
  • 前端：原生微信小程式開發

動員前的準備

  • 一個小程式賬號，開通雲開發（按量計費，有免費額度）
  • 下載微信開發者工具

Ready Go 戰吧

1.小程式沒有設計怎麼辦？

沒有UI，只能自己來了，來先學習一下其他優秀小程式怎麼設計的。 下圖參考來微信記賬本、柚子記賬小程式，在微信中搜搜，我大概看了10多款記賬小程式，讀書人都喜歡借鑑～

微信記賬本、柚子記賬小程式、拼圖碼小陳旭

2.規劃自己的小程式工具頁面、功能

  1. 首頁展示、banner位、功能區、導航欄、意見反饋、更多（個人中心）；
  2. 賬單記錄得要一個，提供一個快捷日期分類（本週、本月、半年、一年、全部）；
  3. 收入/支出的圖表統計來一個；
  4. 個人中心、新增修改收入/支出的記賬頁面； 最開始沒有首頁，只有賬單記錄、統計、記賬頁面，自己開發就沒有畫原型，大抵是懶吧 😁

3.小程式使用到的Icon圖示哪裡有？

我用的是阿里向量圖示庫iconfont

正式戰役

一、小程式前端部分

直接用微信開發者工具生成一個mp-mybook專案，建立對應Page頁面。小程式對應配置詳情，這部分可以參考官方文件。小程式前端部分沒啥可說的，直接上程式碼。

保衛戰-app配置

碼上掘金順序分別是：app.json、app.wxss、app.js

地址：http://code.juejin.cn/pen/7118230227301449759 首頁Code片段

攻堅戰-首頁

index.wxml

``` html

{{item.name}}

| 更多

```

碼上掘金-首頁Code

wxss和js的程式碼比較多，就不直接放入文章中了。想要的同學可以在CodePen上看詳細程式碼吧，因為用的小程式程式碼，無法正常展示，程式碼已註釋，右邊展示為小程式截圖，可以複製程式碼到微信開發者工具中。 地址：http://code.juejin.cn/pen/7117931889356177439 首頁Code片段

攻堅戰-授權頁面

因為需要儲存賬單記錄和使用者頭像相關資訊，為了安全儲存，通過雲函式獲取使用者openId和Code

index.wxml

```html

記賬喵 ```

碼上掘金-授權頁Code

地址：http://code.juejin.cn/pen/7118259996617343007 授權頁Code片段

攻堅戰-記賬列表頁面

index.wxml

``` html {{data.diffCount}} 餘額 {{data.income}} 收入 {{data.expenditure}} 支出 

<view class="flex tab-box">
    <view class="tcenter tab" style="color:{{type=='week'?'#07c160':''}}" bindtap="handleTypeChange" data-type='week'>本週</view>
    <view class="tcenter tab" style="color:{{type=='month'?'#07c160':''}}" bindtap="handleTypeChange" data-type='month'>本月</view>
    <view class="tcenter tab" style="color:{{type=='halfyear'?'#07c160':''}}" bindtap="handleTypeChange" data-type='halfyear'>近半年</view>
    <view class="tcenter tab" style="color:{{type=='year'?'#07c160':''}}" bindtap="handleTypeChange" data-type='year'>近一年</view>
    <view class="tcenter tab" style="color:{{type=='all'?'#07c160':''}}" bindtap="handleTypeChange" data-type='all'>全部</view>
</view>

<view wx:if="{{records.length<=0}}" class='no-data'>暫無資料，趕緊去記賬吧</view>

{{item.date}} 

        </view>
        <view wx:for="{{item.records}}" wx:key="_id" class='item' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" data-outer="{{outerIndex}}">
            <view class='list-item__small flex tright' style="{{item.txtStyle}}">
                <view class='item-content'>
                    <view class='record-left'>
                        <view>
                            <text class='record-type v-center ' style="background-color:{{item.typeValue==1?'#07c160':'#07c160'}};">{{item.typeText}}</text>
                            <text class='record-income v-center '>{{item.incomeName}}</text>
                        </view>
                        <text wx:if="{{item.desc}}" class='record-desc v-center'>備註：{{item.desc}}</text>
                    </view>
                    <view class='record-right'>
                        <text class='record-count' style="color:{{item.typeValue==1?'#f0b63b':'#333'}};">{{item.typeValue==1?'+' : '-'}}{{ filter.toFixed(item.count)}}</text>
                    </view>
                </view>
            </view>
            <view class='item-update' bindtap='updateItem' data-index="{{index}}" data-outer="{{outerIndex}}">
                <text>修改</text>
            </view>
            <view class='item-del' bindtap='delItem' data-index="{{index}}" data-outer="{{outerIndex}}">
                <text>刪除</text>
            </view>
        </view>
    </view>
</view>


<view class="add-btn" bindtap='addData'>
    <image src="../../images/add-btn.png" alt="" />
</view>

```

碼上掘金-記賬列表頁Code

地址：http://code.juejin.cn/pen/7118262383880962062 記賬列表頁Code片段

攻堅戰-新增/修改記賬頁面

```html

{{item.name}} {{item.name}} {{date}}
「」
「」