2. 程式人生 > >詩和遠方：旅行小賬本雲開發實戰

詩和遠方：旅行小賬本雲開發實戰

阿新 • • 發佈：2018-11-30

最近沉迷小程式開發，發現了一款功能、介面、體驗俱佳的小程式“旅行小賬本”。該小程式由騰訊旅遊操刀製作，簡約大氣，功能性強。藉著最近雲開發的熱潮，著手做了個簡約版——"旅行小賬本"。效果比較滿意，畢竟前後臺一人單幹。

Talk is cheap！
show~

IDE

小程式開發必然少不了微信開發者工具，再加上其對雲開發的全面支援，再好不過的開發利器。但熟悉微信開發者工具的朋友們應該知道，它不支援Emmet縮寫語法，並且wxml的屬性值預設用單引號表示(強迫症表示很難受)。
而VSCode很好的補足了微信開發者工具的不足之處，並且支援多元化

外掛開發，輕量好用。
所以這裡推薦採用微信開發者工具+VSCode配合開發。微信開發者工具負責除錯、模擬小程式執行情況，VSCode負責程式碼編輯工作。二者各司其職，會使開發更加的高效、便捷。

總體架構

該專案基於小程式雲開發，使用的模板是雲開發快速啟動模板
由於是個全棧專案，前端使用小程式所支援的wxml + wxss + js開發模式，命名採用BEM命名規範。後臺則是藉助雲資料庫+雲儲存進行資料管理。

專案總體結構

|-travelbook  專案名
    |-cloudfunctions  雲函式模組
        |-deleteItems 級聯刪除--雲函式
        |-getTime     獲取時間--雲函式
    |-miniprogram  專案模組
        |-components  自定義元件
            |-accountCover  賬本封面元件
            |-spendDetail   支出細節元件
        |-pages  頁面
            |-accountBooks     總賬本頁
            |-accountCalendar  賬本日曆頁
            |-accountDetail    支出細節頁
            |-accountList      支出明細頁
            |-accountPage      選定賬本頁
            |-editAccount      賬本編輯頁
            |-index            首頁
        |-vant-weapp   有贊vant框架元件庫
            |-···      系列元件...
        app.js         全域性js
        app.json       全域性json配置
        app.wxss       全域性wxss
複製程式碼

逆向工程

在做該小程式之前，有必要進行專案的逆向工程，進一步解構每一個頁面，從而深入瞭解這款小程式的互動細節。那麼現在我假設自己為騰訊旅遊的產品設計師，在繪製完介面原型後，撰寫了相應的互動文件。當然解構過程中可能有些細節處理並沒有那麼仔細到位...

以下是我繪製的介面原型

接下來對每個頁面的細節進行解構，並完成簡單的wxml結構 

<!--switchList使用定位佈局-->
<view bindtap="switchList" class="list"></view>

<!--newAccount使用flex佈局-->
<view class="newAccount"
 
 bindtap="createNewAccount">
    <view class="desc">旅行中的每一筆開支都有獨特的意義！</view>
    <image src="{{}}"></image>
    <view class="title">建立一個新賬本</view>
</view>
複製程式碼

<!--整體用flex + 百分比佈局-->
<input type="text" class="accuntName" placeholder="旅行賬本名稱" bindinput="getInput" />
  
<van-panel title="選擇封面" class="panel">
    <van-row class="imageBox">
        <!--使用wx:for遍歷資料庫賬本圖片資訊-->
        <van-col span="8" class="imgCol" bindtap="selectThis">
            <image class="select" src="{{}}"></image>
        </van-col>
        
        <van-col span="8">
            <view class="addBox" bindtap="useMore">更多封面</view>
        </van-col>
    </van-row>
</van-panel>

<button type="primary" bindtap="save">儲存</button>
<button type="warn" bindtap="delete">刪除</button>
複製程式碼

<view class="accountDesc" bindtap="viewDetail">
    <!--使用wx:for遍歷資料庫賬本資訊-->
    <view class="accountName">
        <view>{{}}</view>
        <view class="accountTime">{{}}</view>
    </view>
    
    <!--絕對定位-->
    <image class="updateImg" catchtap="editAccount" src="{{}}"></image>
</view>
複製程式碼

<!--switchList使用定位佈局-->
<view bindtap="switchList" class="list"></view>

<view class="account__list-year">{{}}</view>
<view class="account__list-new account__list-public" bindtap="createNewAccount">
    <!--日期小圓點-->
    <view class="account__list-point"></view>
    <view class="account__list-time">{{}}</view>
    <image src="{{}}"></image>
    <view class="account__list-title">建立一個新賬本</view>
</view>

<!--使用wx:for遍歷資料庫賬本資訊-->
<view class="account__list-item account__list-public" bindtap="viewDetail">
    <!--日期小圓點-->
    <view class="account__list-point"></view>
    <image src="{{}}" mode="aspectFill"></image>
    <view class="account__list-name">{{}}</view>
    <view class="account__list-time">{{}}</view>
    <image class="account__list-update" catchtap="editAccount" src="{{}}"></image>
 </view>
複製程式碼

<view class="account__spend">
    <image bindtap="getCalendar" class="account__spend-calendar" src="{{}}"></image>
    <view class="account__spend-text">
        <view class="account__spend-total">總花費(元)</view>
        <view class="account__spend-num">{{}}</view>
    </view>
    <image bindtap="accountAnalyze" class="account__spend-detail" src="{{}}"></image>
</view>

<view class="account__show-time">今天</view>
    <view class="account__show-detail">
        <view class="account__show-income account__show-public">
        <view class="account__show-title">收入(元)</view>
        <text class="account__show-in">+{{}}</text>
    </view>
    <view class="account__show-spend account__show-public">
        <view class="account__show-title">支出(元)</view>
        <text class="account__show-out">-{{}}</text>
    </view>
</view>

<!--使用wx:for遍歷資料庫賬本資訊-->
<view class="account__show-items-spend">
    <view>
        <image src="{{}}"></image>
    </view>
    <text>{{}}</text>
    <text class="account__show-items-money">{{}}</text>
</view>
複製程式碼

<!--日曆使用極點日曆的外掛-->
<!--json中做配置-->
"usingComponents": {
    "calendar": "plugin://calendar/calendar"
}

<!--js改變樣式-->
days_style.push({
  month: 'current',
  day: new Date().getDate(),
  color: 'white',
  background: '#e0a58e'
})

<!--wxml中引用-->
<calendar weeks-type="cn" cell-size="50" next="{{true}}" prev="{{true}}"
    show-more-days="{{true}}" calendar-style="demo6-calendar"
    header-style="calendar-header"board-style="calendar-board" active-type="rounded" 
    lunar="true" header-style="header"calendar-style="calendar"days-color="{{days_style}}">
</calendar>
複製程式碼

<!--頂欄日期及收支結構-->
<view class="account__title">
    <text class="account__title-time">{{}}</text>
    <text class="account__title-spend">支出{{}}元 收入{{}}元</text>
</view>

<!--收支細節結構 使用flex彈性佈局-->
<view class="account__detail">
    <image src="{{}}"></image>
    <view class="account__detail-name">{{}}</view>
    <view class="account__detail-money">{{}}</view>
</view>
複製程式碼

<!--使用vant框架的van-tabs元件-->
<!--並封裝自定義元件複用收支頁，自定義元件後面會詳細說明-->
<van-tabs active="{{ active }}" bind:change="onChange">
  <van-tab title="支出">
    <spendDetail detail="{{detail}}" accountKey="{{accountKey}}"></spendDetail>
  </van-tab>
  <van-tab title="收入">
    <spendDetail detail="{{income}}" accountKey="{{accountKey}}"></spendDetail>
  </van-tab>
</van-tabs>
複製程式碼

雲開發

在做完逆向工程的解構，頁面基礎結構基本搭建完成。但頁面依舊是靜態的，需要資料來填充。所以第二步就是資料庫的設計。而小程式的雲控制檯恰好提供了資料的操作功能，為資料驅動提供基石。

雲資料庫設計

雲資料庫是一種NoSQL資料庫。每一張表是一個集合。值得注意的是在設計資料庫時，_id 和_openid這兩個欄位需要帶上。_id是表的主鍵，而_openid是使用者標識，每個使用者都有不同的_openid，可區分不同使用者。

以下是專案中的資料表設計

cover_photos 賬本封面表  用於儲存建立賬本時需要的封面資訊
    - _id
    - _openid
    - cover_index 封面索引
    - cover_url   封面url
    - isSelected  封面是否選中
複製程式碼
accounts 賬本表   用於儲存使用者建立的賬本
    - _id
    - _openid
    - accountKey  賬本唯一標識
    - coverUrl    賬本封面
    - i           賬本索引
    - inputValue  賬本名字
    - now         賬本建立時間
    - spend       賬本總花費
複製程式碼
account_detail 支出型別表   用於儲存消費型別
    - _id
    - _openid
    - detail       型別細節
    - pic_index    消費型別索引
    - pic_url      未點選時的圖片
    - pic_url_act  點選後的圖片
    - type         消費型別
複製程式碼
account_income 收入型別表   用於儲存收入型別
    - _id
    - _openid
    - pic_index    收入型別索引
    - pic_url      未點選時的圖片
    - pic_url_act  點選後的圖片
    - type         收入型別
複製程式碼
spend_items   消費明細表
    - _id
    - _openid
    - accountKey   賬本唯一標識
    - address      消費地點
    - desc         消費描述
    - fullDate     消費時間
    - money        消費金額
    - pic_type     消費型別
    - pic_url      消費型別圖片
複製程式碼

雲儲存管理

這是個非常實用的板塊。類似於百度雲盤，它提供了檔案儲存、上傳與下載功能。

除此之外，它還會將你所上傳的資源自動進行壓縮操作，並生成一個地址供你引用。該專案中的一些圖片資源就是存在於此，然後在雲資料庫的欄位中引用這些資源地址即可，十分方便，不必在本地儲存，佔用小程式記憶體。

雲函式設計

雲函式簡單來說就是在雲後端(Node.js)執行的程式碼，本地看不到這些程式碼的執行過程，全封閉式只暴露介面供本地呼叫執行，本地只需等待雲端程式碼執行完畢後返回結果。這也是面向介面程式設計的思想體現。

專案中的雲函式設計

// getTime  獲取當前時間並格式化為 yyyy-mm-dd

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

// 初始化雲函式
cloud.init()

// 雲函式入口函式
exports.main = async (event, context) => {
  var date = new Date()
  var seperator1 = "-"
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var strDate = date.getDate()
  if (month >= 1 && month <= 9) {
    month = "0" + month
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate
  }
  // 格式化當前時間
  var currentdate = year + seperator1 + month + seperator1 + strDate
  return currentdate
}
複製程式碼
// deleteItems  批量刪除，雲資料庫的批量刪除只允許在雲函式中執行

// 雲函式入口檔案
const cloud = require('wx-server-sdk')

// 初始化雲函式
cloud.init()

// 連線雲資料庫
const db = cloud.database()
const _ = db.command


// 雲函式入口函式
exports.main = async (event, context) => {
  try {
    return await db.collection('spend_items')
      .where({
        accountKey: event.accountKey
      })
      .remove()
  } catch (e) {
    console.error(e)
  }
}
複製程式碼

MVVM

介面有了，資料有了。萬事俱備，只欠東風！所以下一步就是MVVM的設計。小程式本質就是基於MVVM所設計的，在MVVM的世界裡，資料是靈魂，一切都由資料來驅動。

賬本頁顯示

賬本頁有兩種顯示的風格，左上角的按鈕可以來回切換風格，下拉可重新整理頁面，顯示accounts資料表中儲存的賬本資訊。顯示時有個小細節，需要根據建立的時間先後來顯示，越晚建立的越先顯示。

// 頁面資料設計, 在wxml中使用{{}}符號引用資料，資料就動態顯示到了頁面上
data: {
    isList: false, // 轉換頁面風格的標識 true為豎向風格 false為橫向風格
    accounts: [],  // 儲存查詢的賬本資料
    now: null,     // 儲存當日時間
    year: null     // 儲存年份
}

 // 轉換顯示風格
switchList() {
    // 設定頁面風格樣式
    let isList = !this.data.isList
    this.setData({
      isList
    })
    wx.setStorage({
      key: "isList",
      data: isList
    })
}

// 獲取頁面風格轉換標識
var isList = wx.getStorageSync('isList')
    
// 查詢賬本
db.collection('accounts')
  .get({
    success: res => {
      this.setData({
        accounts: res.data.reverse(),  // 反轉陣列，優先顯示建立早的賬本
        isList
      })
      wx.hideLoading()
    }
  })

// 呼叫雲函式介面 獲取當前日期
wx.cloud.callFunction({
    // 雲函式介面名就是建立的雲函式名字，這裡是'getTime'
    name: 'getTime',
    success: (res) => {
    let year = res.result.split('-')[0]
    this.setData({
      now: res.result,
      year
    })
    },
    fail: console.error
})
複製程式碼

賬本頁增刪改

賬本頁通過呼叫相應的雲資料庫API，可進行一系列的增刪改操作。值得一提的是，修改時需要表單回顯，刪除時需要級聯刪除。因為一個賬本中有許多收支情況，spend_items表就是進行收支記錄，所以刪除賬本時需要級聯刪除對應的spend_items表中的收支資訊。

一些重要的邏輯

  • 封面單選邏輯
    data: {
    images: [],      // 封面陣列
    selectImg: null, // 選擇其它封面
    isSelected: {},  // 選中的圖片
    inputValue: '',  // 賬本名字
    now: null,       // 當前時間
    account: {}      // 傳入賬本資訊
}

  // 單選邏輯 通過構造{'0': isSelected}來實現
selectThis(e) {
    let index = e.currentTarget.dataset.index
    let coverUrl = e.currentTarget.dataset.coverurl
    let is = this.data.isSelected[index]
    let obj = {
        coverUrl
    }
    // obj[index] 屬性動態改變
    obj[index] = !is
    obj.i = index
    this.setData({
        isSelected: obj
    })
}
複製程式碼
  • 表單回顯邏輯
    // 頁面載入時先通過對應的accountKey, 得到回顯資訊
let { i, id, value, url, accountKey } = options
photos.get({
    success: res => {
    this.setData({
      images: res.data,
      account: {
        id,
        value,
        url,
        i,
        accountKey
      },
      isSelected: obj
    })
    wx.hideLoading()
  }
})
// 修改
save() {
    let { id } = this.data.account
    let { i, coverUrl, value } = this.data.isSelected
    // 若沒修改 則為之前的value
    let inputValue = this.data.inputValue || value
    
    db.collection('accounts')
      .doc(id)
      .update({
        data: {
            inputValue,
            coverUrl,
            i
        }
    })
}
複製程式碼
  • 級聯刪除邏輯
    db.collection('accounts')
    .doc(this.data.account.id)
    .remove()
    .then(() => {
      wx.hideLoading()
      wx.showToast({
        title: '刪除成功'
      })
      setTimeout(() => {
        wx.reLaunch({
          url: '../accountBooks/accountBooks'
        })
      }, 400)
    })
  // 呼叫deleteItems雲函式, 傳入對應accountKey主鍵, 通過雲函式批量刪除
  wx.cloud.callFunction({
    name: 'deleteItems',
    data: {
      accountKey
    }
  })
複製程式碼

賬本頁收支

因為收入與支出頁面基本類似，所以使用自定義元件封裝，可以複用。

// 封裝spendDetail元件
// 註冊元件
properties: {
    detail: {
      type: Object
    },
    accountKey: {
      type: Number
    },
    isSpend: {
      type: Boolean
    }
}

// 引用元件
<van-tab title="支出">
    <spendDetail detail="{{detail}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail>
  </van-tab>
  <van-tab title="收入">
    <spendDetail detail="{{income}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail>
</van-tab>
複製程式碼

收入與支出型別icon選擇使用兩個view來存放，通過選擇不同型別，跳轉不同的icon

// js
data: {
    address: '',
    money: 0,
    desc: '',
    selectPicIndex: 0,
    selectIndex: 0
}
// 選擇消費類別
selectSpend(e) {
  let { index } = e.currentTarget.dataset
  let { selectPicIndex } = this.data
  selectPicIndex = index
  this.setData({
    selectPicIndex
  })
},

// 選擇消費類別中的細節
selectSpendDetail(e) {
  let { index } = e.currentTarget.dataset
  let { selectIndex } = this.data
  selectIndex = index
  this.setData({
    selectIndex
  })
}

// wxml
// 消費型別
<view class="expense">
  <block wx:for="{{detail}}" wx:key="index">
    <view class="expense__type" bindtap="selectSpend" data-index="{{index}}">
      <block wx:if="{{selectPicIndex == item.pic_index}}">
        <view class="expense__type-icon" style="background-color: #e64343">
          <image src="{{item.pic_url_act}}"></image>
        </view>
      </block>
      <block wx:else>
        <view class="expense__type-icon">
          <image src="{{item.pic_url}}"></image>
        </view>
      </block>
      <view class="expense__type-name">{{item.type}}</view>
    </view>
  </block>
</view>

// 消費子型別
<view class="detail">
  <block wx:for="{{detail[selectPicIndex].detail}}" wx:key="index">
    <view class="detail__type" bindtap="selectSpendDetail" data-index="{{index}}">
      <image class="detail__type-icon" src="{{item.detail_url}}"></image>
      <block wx:if="{{selectIndex == item.detail_index}}">
        <view class="detail__type-name" style="color: #f86319; border-bottom: 1rpx solid #f86319;">
          {{item.detail_type}}
        </view>
      </block>
      <block wx:else>
        <view class="detail__type-name" style="border-bottom: 1rpx solid #e4e2e2;">
          {{item.detail_type}}
        </view>
      </block>
    </view>
  </block>
</view>
複製程式碼

賬本頁明細

因為收支明細中需要顯示每一天的消費資訊，所以需要將資料表中的資料通過時間來分類，分成若干個陣列，頁面從而使用wx:for來遍歷這些陣列。在顯示之前，首先需要判斷有無收支資訊。

// 通過時間分類演算法  {} => [ [{時間1}], [{時間2}], [{時間3}] ]
arr.forEach(item => {
  if (!_this.isExist(item.fullDate, dateArr)) {
    dateArr.push([item])
  } else {
    dateArr.forEach(res => {
      if (res[0].fullDate == item.fullDate) {
        res.push(item)
      }
    })
  }
})

// 使用map 方法構造 [{}, {}, {}, ...] 型別陣列
dateArr = dateArr.map((item) => {
  let spend = 0
  let income = 0
  item.forEach(res => {
    if (res.money > 0) {
      spend += res.money
    } else {
      income += (-res.money)
    }
  })
  return {
    item,
    spend,
    income
  }
})

// 判斷自身是否存在陣列中
isExist(item, arr) {
    for (let i = 0; i < arr.length; i++) {
      if (item == arr[i][0].fullDate)
        return true
    }
    return false
  }
複製程式碼

以上是小程式中比較複雜的邏輯實現。

一點感悟

提交日誌 github.com/FightingHao…

之前做專案時，只是在github提交時草草寫一句話當做提交日誌。這次做了一個比較正式提交日誌，做這個的初衷其實是為了監督自己不要偷懶，堅持每天完成專案一部分，並總結不足之處。學而時習之才能成長的更快！

篇幅有限，奉上專案github 如果你喜歡這篇文章或是這個專案，不妨進去點個Star支援下，有興趣的朋友歡迎Fork，一起探討知識或是旅行~~當然也希望您能留下一些寶貴的建議。感激不盡！

生活不止眼前的苟且，還有詩和遠方。最後要感謝騰訊旅遊的各位大大設計出一個這麼簡潔美觀大方的小程式產品，實屬良心之作！

相關推薦

詩和遠方：旅行小賬本雲開發實戰

最近沉迷小程式開發，發現了一款功能、介面、體驗俱佳的小程式“旅行小賬本”。該小程式由騰訊旅遊操刀製作，簡約大氣，功能性強。藉著最近雲開發的熱潮，著手做了個簡約版——"旅行小賬本"。效果比較滿意，畢竟前後臺一人單幹。 Talk is cheap！ show~ IDE 微信開發者工具

小程序雲開發實戰

tab 調用 content image code 一個數據庫 load 失敗 xml文件 1. 雲開發簡介 由於小程序本身存儲數據的能力有限，所以不可能將大量的數據保存在客戶端，而且將數據保存在本地既不安全，也無法與其他小程序用戶共享，所以大多數小程序都需要一個服務端，服

大風起兮雲飛揚！ 小程式雲開發實戰奉上

寫在前面： 小程式雲開發釋出有一段時間了，最近著手做了一個基於雲開發的小程式專案--仿《微博鮮知》，來自新浪的這款全新風格的小程式雖然介面非常簡約清新，但是內部還是內藏了很多玄機，在實現的路上遇上了不少坎坷，在這裡分享給大家。希望給大家提供一些思路。 先展示一下最終結果：更多圖片資源在這裡

小程式雲開發實戰

由於小程式本身儲存資料的能力有限，所以不可能將大量的資料儲存在客戶端，而且將資料儲存在本地既不安全，也無法與其他小程式使用者共享，所以大多數小程式都需要一個服務端，服務端可以用多種技術實現，如 PHP、Node.js、Python、Asp.net、Java EE 等。不管使用哪種技術實現服務端，開發一款小程式

Taro + 小程式雲開發實戰

前言 小程式開放了雲開發能力，為開發者提供了一個可以很快速構建小程式後端服務的能力，作為一名對新技術不倒騰不快的前端，對此也是很感興趣的； 而Taro 是凹凸實驗室推出的，基於React 語法規範 的多端開發解決方案，較之於mpvue 或者wepy，由於年輕，坑還比較多，

除了寫程式碼，還有詩和遠方

“生活不止眼前的苟且  還有詩和遠方的田野  你赤手空拳來到人世間    為找到那片海不顧一切”       許巍聯袂高曉鬆的這首“生活不止眼前的苟且”最近已經紅遍各大朋友圈。這首

以夢為馬，越騎越傻。詩和遠方，越走越慌

曾夢想仗劍走天涯，現如今拄棍戳地瓜。曾經以為自己會高騎大馬衣錦還鄉，奈何現實自己只是頭小毛驢埋頭拉磨。也有過說走咱就走風風火火闖九州的衝動，可奈何只剩下做火車的時候吃紅燒牛肉麵還是老壇酸菜面的糾結和在網上百一百啥是九州啊？九州在哪呢？ 把夢比作馬，無非是馬飛奔的瀟灑、速度的激情和遠方的愛情

文藝程式設計師丨基於Python的詩和遠方，我有python也有詩！

  概述   學習Python中有不明白推薦加入交流群                 號：516107834          

小程式雲開發中資料庫的資料分段和顯示圖片

這是一個比較久遠的問題，查看了官方解釋也沒有弄好，網上搜的試了也不對，這裡給出一種方法，比較笨，但是可以實現。 玩過小程式雲開發的都知道雲開發控制檯的資料庫是這樣的 這裡面的資料一般都不會太多，資料內容也不會太長，畢竟免費的資料庫沒有那麼大的容量，但是免費的東西作為一名技術咱也得用到極

小程式雲開發教程七：貼子的詳情及評論功能

我們先看看介面: 我們如果要實現評論功能, 先看一下總的資料結構: 那麼需要什麼引數呢? 引數如下 comment: 評論內容 username: 使用者名稱 time: 評論時間 userId:

生活除了眼前的苟且，還有詩和遠方！

前言 這是一部由真實事件改編的印度電影，社會反響很大，豆瓣評分高達9.2，其實他在中國市場已經上映有段時間了，到今天去看，它依舊是滿座，足矣從側面證明這部影片的質量及口碑都是上乘的。 實際的觀影感受也證明了這一點。 整個影片幾乎是一氣呵

小程式雲開發教程六：貼子的稽核

別人釋出了，就得稽核呀。所以這篇我們來講稽核功能的實現。 條件： 不能稽核自己的，並且是稽核次數在0-5次的。 那麼稽核的邏輯是什麼呢？ 我在這篇的邏輯是： 總共可以稽核5次，然後如果點選不通過，就不做操作，如果點選通過就把狀態+1，然後狀態的值大於0就代表通過

生活不止眼前的苟且，還有詩和遠方.....

注：代價函式（有的地方也叫損失函式，Loss Function）在機器學習中的每一種演算法中都很重要，因為訓練模型的過程就是優化代價函式的過程，代價函式對每個引數的偏導數就是梯度下降中提到的梯度，防止過擬合時新增的正則化項也是加在代價函式後面的。在學習相關演算法的過程中，對代價函式的理解也在不斷的加深，在

生活不只眼前的苟且，還有詩和遠方的田野。

一、前言         4月21日，阿里巴巴在Qcon大會上宣佈跨平臺移動開發工具Weex開放內測邀請。         Weex能夠完美兼顧效能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的效能體驗，並支援iOS、安卓、YunOS及Web等多端部署。

生活充滿無奈和苟且，找到詩和遠方的田野

這篇文章來自於我最近剛建立的微信公眾號：星辰漁夫，歡迎大家訂閱！關注回覆「星辰大海」，你懂的。   前兩天在知乎上看到個問題，感觸很深，連結如下：   https://www.zhihu.com/question/324630784   簡單說下：題主

小程式雲開發：菜鳥也能全棧做產品

我想獨立實現一個全棧產品為什麼這麼難 日常生活中，我們會使用很多軟體產品。在使用這些產品的時候，我們看得見的東西稱為“前端介面”如一個輸入框、一個按鈕，點選按鈕之後發生的一切看不見的東西稱為“後端服務”。與之對應的創造者分別稱為“前端程式設計師”、“後端程式設計師”，然而，一個完整產品的開發不僅僅是隻有前端和

玩轉小程序雲開發

上傳 記錄 rac new .json 環境 一個數 文件 哈哈 前言 　　好久沒寫小程序的文章了，最近小程序變動也比較大。最主要的是我之前也曾寫過個人如果開發小程序，可以使用Bmob免費的服務去開發自己的一套小程序，Bmob提供了免費的雲函數以及數據庫（20G空間）。

微信小程序雲開發更換雲開發環境

第一個 rip err 環境 我們 spa asc color 開發環境 小程序雲開發環境初始化默認是第一個環境，但是我們可以指定環境id //app.js App({ onLaunch: function () { if (!wx.cl

**小程式·雲開發**

**小程式·雲開發** 微信小程式於9月10號開放新功能-雲開發,使得開發者無需搭建伺服器也可擁有云端能力.官方描述如下: “雲開發為開發者提供完整的雲端支援，弱化後端和運維概念，無需搭建伺服器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者

wepy 小程序雲開發

不能 體驗 tps alt http tar 源碼 dex eight 小程序前段時間更新了雲開發的功能，剛聽到對時候覺得簡直是個人開發者對福音，尤其是對我這樣對後端不是很懂對前端傻傻，簡直不能太方便，就試了下。 體驗二維碼： 源碼：https://github.c