極速微信小程序開發，第一天

收到xx平臺的合同確認的短信後，下午把手上的事情理完後。Get一項新技能
以前和微信相關的單都是轉出去給人家作，許久沒有打代碼了，前端的技術也忘的差很少了。還好如今項目選型的時候，經過討論最終明確下來，採用時下流行的框架。如Vue，Angural，後端採用了go語言

一直認爲微信就是js調用接口的玩意，使用微信封裝好的公共方法來快速開發微信網站及小程序。看官們不要相信個人片面之詞

仍是從先從微信官方指引入手，第一感受內容很簡潔，配上了圖，理解起來就更方便了。

今天我主要回顧一下，爲了快速消化這個單。你們也能夠在小程序裏面搜索 房產評估，招商銀行的。此次的小項目就是仿他作一個，主題顏色爲綠色

需求也是比較簡單，兩個頁面，房屋信息提交頁面包括（廣告圖切換，聯動省市地區，詳細地址，面積，樓層），客戶信息提交頁面包括（姓名，手機號碼，驗證碼）這個頁面主要是爲了防止客戶亂搞，特地加了手機號碼驗證，附加一個web網站能夠查看客戶提交的資料，這塊是有現成的php網站
開發時間當時定了一個星期
項目背景我就不描述了。

開發工具官網下載吧，不過這個開發工具，須要微信掃碼才能建立個人第一個項目。

已經把小程序API掃一遍，第一步主要是想把圖片輪換搞定，當時看完小程序API沒有一點實現的思路。
微信小程序也火了一陣子，想着網上應該也有一些案例或者簡單的Demo，API裏面的也有Demo不過都是靜態網站。仍是去網上Down了一批，不過多數是微信Demo改出來的，小傷心。。。。

在這批裏面，找到了一個外賣平臺的Demo，恰好有圖片輪換，這下我開心了。看了看代碼，原來就是幾個屬性的設置就解決了。圖片能夠保存到本地，也能夠使用網絡圖片

下面附上代碼

頁面代碼

<view class="container flex-wrap flex-direction-col">
  <view class="my-swiper">
      <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" height="150"/>
      </swiper-item>
    </block>
  </swiper>
  </view>
</view>

樣式代碼

.my-swiper image{
  width: 100%;
}

.wrap-button{
	line-height: 1.5rem;
	display: inline-block;
	border-bottom: 1px solid red;
	background-color: red;
	width:8rem;
	height: 1.5rem;
	vertical-align: bottom;
	margin-left: 1rem;
}

js代碼

Page({
  data: {
    imgUrls:[{"圖片地址"}],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000
  }
})

最後也帶上小程序首頁圖片，後面接着更新