小程序之路

轉眼之間2017年立刻就要過去，回顧這一年作小程序開發也就幾個月了，是時候須要對於小程序作出必定的總結了。小程序咱們能夠理解爲至關於安卓的App 最直接的方式，固然如今開發app 的方式不少 你可使用Hbulider以及WebX5，我我的一開始並不看好小程序，可是沒有辦法客戶須要作，小程序出來也就很久了，可是一直沒有公衆號那麼火，學習了小程序我花了3天的時間左右，而後就是開發項目了。具體的小程序的學習的網址你能夠進行參考https://mp.weixin.qq.com/debug/wxadoc/dev/index.html  微信的官方的網址進行學習。具體的我就不一一介紹了。

一.若是你是一個前端的開發人員那麼只須要稍微改變一些基本的HTML =>WXML 的寫法 以及 CSS=>=WXSS以及JS 稍微有點變化其餘沒有什麼大的變化的。靈活的將JSON 列表和WXML 相互的結合發揮到極致的效果。開發微信小程序你須要進行安裝一個微信開發工具。

二.若是你對於WebApi已經學習過或者已經上手過那麼學習WebApi  仍是很是的容易的。

三.關於微信小程序並結合到WebApi 來進行使用開發應用程序仍是很是的快的。以前我一直在從事作微信公衆號方面的開發，當我接觸太小程序後才發現開發應用小程序是多麼的方便以及快捷。因此朋友我建議你，若是後續須要進行應用程序方面的開發，我提倡而且建議你使用小程序作。真的很好用。

四.微信小程序方面API 的請求分爲如下幾類。API列表：

1.網絡 API 列表：

API	說明
wx.request	發起網絡請求
wx.uploadFile	上傳文件
wx.downloadFile	下載文件
wx.connectSocket	建立 WebSocket 鏈接
wx.onSocketOpen	監聽 WebSocket 打開
wx.onSocketError	監聽 WebSocket 錯誤
wx.sendSocketMessage	發送 WebSocket 消息
wx.onSocketMessage	接受 WebSocket 消息
wx.closeSocket	關閉 WebSocket 鏈接
wx.onSocketClose	監聽 WebSocket 關閉

2.媒體 API 列表：

API	說明
wx.chooseImage	從相冊選擇圖片，或者拍照
wx.previewImage	預覽圖片
wx.startRecord	開始錄音
wx.stopRecord	結束錄音
wx.playVoice	播放語音
wx.pauseVoice	暫停播放語音
wx.stopVoice	結束播放語音
wx.getBackgroundAudioPlayerState	獲取音樂播放狀態
wx.playBackgroundAudio	播放音樂
wx.pauseBackgroundAudio	暫停播放音樂
wx.seekBackgroundAudio	控制音樂播放進度
wx.stopBackgroundAudio	中止播放音樂
wx.onBackgroundAudioPlay	監聽音樂開始播放
wx.onBackgroundAudioPause	監聽音樂暫停
wx.onBackgroundAudioStop	監聽音樂結束
wx.chooseVideo	從相冊選擇視頻，或者拍攝

文件 API 列表：

API	說明
wx.saveFile	保存文件
wx.getSavedFileList	獲取已保存的文件列表
wx.getSavedFileInfo	獲取已保存的文件信息
wx.removeSavedFile	刪除已保存的文件信息
wx.openDocument	打開文件

3.數據 API 列表：

API	說明
wx.getStorage	獲取本地數據緩存
wx.getStorageSync	獲取本地數據緩存
wx.setStorage	設置本地數據緩存
wx.setStorageSync	設置本地數據緩存
wx.getStorageInfo	獲取本地緩存的相關信息
wx.getStorageInfoSync	獲取本地緩存的相關信息
wx.removeStorage	刪除本地緩存內容
wx.removeStorageSync	刪除本地緩存內容
wx.clearStorage	清理本地數據緩存
wx.clearStorageSync	清理本地數據緩存

4.位置 API 列表：

API	說明
wx.getLocation	獲取當前位置
wx.chooseLocation	打開地圖選擇位置
wx.openLocation	打開內置地圖
wx.createMapContext	地圖組件控制

5.設備 API 列表：

API	說明
wx.getNetworkType	獲取網絡類型
wx.onNetworkStatusChange	監聽網絡狀態變化
wx.getSystemInfo	獲取系統信息
wx.getSystemInfoSync	獲取系統信息
wx.onAccelerometerChange	監聽加速度數據
wx.startAccelerometer	開始監聽加速度數據
wx.stopAccelerometer	中止監聽加速度數據
wx.onCompassChange	監聽羅盤數據
wx.startCompass	開始監聽羅盤數據
wx.stopCompass	中止監聽羅盤數據
wx.setClipboardData	設置剪貼板內容
wx.getClipboardData	獲取剪貼板內容
wx.makePhoneCall	撥打電話
wx.scanCode	掃碼

6.界面 API 列表：

API	說明
wx.showToast	顯示提示框
wx.showLoading	顯示加載提示框
wx.hideToast	隱藏提示框
wx.hideLoading	隱藏提示框
wx.showModal	顯示模態彈窗
wx.showActionSheet	顯示菜單列表
wx.setNavigationBarTitle	設置當前頁面標題
wx.showNavigationBarLoading	顯示導航條加載動畫
wx.hideNavigationBarLoading	隱藏導航條加載動畫
wx.navigateTo	新窗口打開頁面
wx.redirectTo	原窗口打開頁面
wx.switchTab	切換到 tabbar 頁面
wx.navigateBack	退回上一個頁面
wx.createAnimation	動畫
wx.createContext	建立繪圖上下文
wx.drawCanvas	繪圖
wx.stopPullDownRefresh	中止下拉刷新動畫

7.WXML節點信息 API 列表：

API	說明
wx.createSelectorQuery	建立查詢請求
selectorQuery.in	指定在哪一個自定義組件中選取節點
selectorQuery.select	根據選擇器選擇單個節點
selectorQuery.selectAll	根據選擇器選擇所有節點
selectorQuery.selectViewport	選擇顯示區域
nodesRef.boundingClientRect	獲取佈局位置和尺寸
nodesRef.scrollOffset	獲取滾動位置
nodesRef.fields	獲取任意字段
selectorQuery.exec	執行查詢請求

8.開放接口：

API	說明
wx.login	登陸
wx.getUserInfo	獲取用戶信息
wx.chooseAddress	獲取用戶收貨地址
wx.requestPayment	發起微信支付
wx.addCard	添加卡券
wx.openCard	打開卡券

 

五.開發的微信小程序。

2<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{banner}}">
      <swiper-item class="banner" >
          <image src="{{item.image}}"  data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/>
          <text class="banner-title">{{item.title}}</text>
      </swiper-item>
    </block>
  </swiper>
  <view class="news-item-container">
    <block wx:for="{{list}}" wx:for-index="id">
      <text wx:if="{{item.header}}" class="sub-title">{{item.header}}</text>
      <navigator wx:else url="../detail/detail?id={{item.id}}">
        <view class="news-item" >
          <view class="news-item-left">
            <text class="news-item-title">{{item.title}}</text>
          </view>
          <view class="news-item-right">
            <image src="{{item.images[0]}}" class="news-image"/>
          </view>
        </view>
      </navigator>
    </block>
    <button type="primary" class="load-btn"  loading="{{loading}}" plain="{{plain}}" bindtap="loadMore"> 更多 </button>
  </view>
  
</view>

//index.js
//獲取應用實例
var app = getApp()
var utils = require('../../utils/util.js')
Page({
  data: {
    list: [],
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false
  },
  //事件處理函數
  bindViewTap(e) {
    wx.navigateTo({
      url: '../detail/detail?id=' + e.target.dataset.id
    })
  },
  loadMore (e) {
    if (this.data.list.length === 0) return
    var date = this.getNextDate()
    var that = this
    that.setData({ loading: true })
    wx.request({
      url: 'http://news.at.zhihu.com/api/4/news/before/' + (Number(utils.formatDate(date)) + 1),
      headers: {
        'Content-Type': 'application/json'
      },
      success (res) {
         that.setData({
           loading: false,
           list: that.data.list.concat([{ header: utils.formatDate(date, '-') }]).concat(res.data.stories)
         })
      }
    })
  },
  getNextDate (){
    const now = new Date()
    now.setDate(now.getDate() - this.index++)
    return now
  },
  onLoad () {
    let that = this
    wx.request({
      url: 'http://news-at.zhihu.com/api/4/news/latest',
      headers: {
        'Content-Type': 'application/json'
      },
      success (res) {
         that.setData({
           banner: res.data.top_stories,
           list: [{ header: '今日熱聞' }].concat(res.data.stories)
         })
      }
    })
    this.index = 1
  }
})

　關於小程序的開發文檔你們能夠參考W3C :　https://www.w3cschool.cn/weixinapp/9wou1q8j.html       2018/2/12  00：12 ：46