小程序簡單Demo開發記錄-01

• 文章並不是什麼深刻的文章，對小程序有一定了解和研究的人請直接忽略，避免產生鄙視、不屑等負面情緒。因爲文章的內容實在是過於淺薄，尚且停留在實現功能的角度
• 並且我很肯定地將有一些地方應該是使用了錯誤的方法，以至於從UI設計的角度來看奇醜無比。
• 那麼本文的意義何在呢？八成的意義在於給自己看，我們都知道，在學習一項新東西時，如果學一段時間，放一段時間，再次撿起來時會忘記之前已經學習的內容。於是簡單
  的記錄顯得本重要。就像我們剛開始搭建Spring框架時，明明搭建步驟就那麼幾步，但如果忘記步驟原理就又得重頭看一遍。費時費力。
• 對小程序剛開始瞭解的小夥伴，本文可以提供一個初學者寫這個小東西的思路和步驟，起到一定的參考作用。

本文介紹了什麼

  前段時間覺得小程序挺好玩，於是想起來學一學，開始跟着萬門大學免費贈送的小程序視頻課程學了一天，看完了發現這個課程真的是相當於什麼都沒有講。於是硬着頭皮把小程序官方文檔通篇瀏覽了一遍，瞭解了頁面佈局的方式、能夠實現的功能，如何動態處理數據，如何與後臺建立連接等。
  自然，文檔看完了就需要做兩個Demo練手，本文就是其中一個咯。
  打開微信，搜一搜附近小程序，隨便找兩個，一個簡單的，一個稍微複雜一點的，啦啦啦，這就開始吧。

Demo介紹

這個小程序是一個簡單的飯館信息介紹，主要包含如下幾個方面內容

• 飯店名字、照片、營業時間等，照片要求能夠預覽
• 飯店位置
• 飯店電話，點擊電話能直接打過去
• 信息反饋

分解

1. 飯店名字、照片，照片要求能夠預覽
   此部分作爲首頁，用於展示所有信息，並作爲其它三個頁面的入口
   
2. 飯店位置
   一個
3. 電話
   綁定事件，響應事件時調用撥打電話API即可
   
4. 信息反饋
   一個普通頁面即可
   

具體來講

1. 首頁
   首頁佈局代碼

<view class="container">
  <view class="title" style='width: 700rpx; height: 270rpx;'>
    <view style='width: 80%; height:270rpx;'>
      <text style='font-size: 35px'> 醉翁亭</text>
      <text style='font-size: 25px'>科技園店</text>
      <text style='font-size: 16px; margin-left: 10rpx; margin-top: 20rpx;'>美食▪ 徽菜</text>
    </view>
    <view style='width: 20%; height:100%; display: flex; '>
      <image style='width: 160rpx; height:160rpx; margin-top: 30rpx;' mode='scaleToFill' src='../img/store.png'></image>
    </view>
  </view>
  <view class="information">
    <view id='address' class="infoItem" bindtap='addressTap' bindtouchstart='switchColor1' bindtouchend='switchColor1' style='background-color: {{textBackgroundColor1}}'>
      <image class="infoItemStart" src='../img/icon_address.png'></image>
      <text class="infoItemText">廣東省深圳市南山區科技園</text>
      <image class="infoItemEnd" src='../img/icon_next.png'></image>
    </view>
    <view class="infoItem" >
      <image class="infoItemStart" src='../img/icon_clock.png'></image>
      <text class="infoItemText">10:00 - 22:00</text>
    </view>
    <view id='call' class="infoItem" bindtap='CallTap' bindtouchstart='switchColor2' bindtouchend='switchColor2' style='background-color: {{textBackgroundColor2}}'>
      <image class="infoItemStart" src='../img/icon_call.png'></image>
      <text class="infoItemText">123456789</text>
      <image class="infoItemEnd" src='../img/icon_next.png'></image>
    </view>
    <view class="infoItem">
      <image class="infoItemStart" src='../img/icon_photo.png'></image>
      <text class="infoItemText">門店照片</text>
    </view>
  </view>
  <view class="photo">
    <image class="photoImg" bindtap="preview" data-src='../img/store.png' src='../img/store.png'></image>
    <image class="photoImg" bindtap="preview" data-src='../img/store.png' src='../img/store.png'></image>
    <image class="photoImg" bindtap="preview" data-src='../img/store.png' src='../img/store.png'></image>
    <image class="photoImg" bindtap="preview" data-src='../img/store.png' src='../img/store.png'></image>
  </view>
  <view class="feedback">
    <text style='color: blue; font-size: 16px;' bindtap='feedback'>反饋問題</text>
  </view>
</view>

佈局效果

2. 地圖頁面
地圖頁面代碼

<map
      id="myMap"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      markers="{{markers}}"
      covers='{{covers}}'
      show-location='{{true}}'
    >
  <cover-view class="locaton" bindtap='locate'>
    <cover-image class="coverImg" bindtouchstart='switchImg' bindtouchend='switchImg' data-src="{{locationSrc}}" src='{{locationSrc}}'></cover-image>  
  </cover-view>
</map>

<view class="mapNavi" style="width: 100%; height: 20%;">
  <view style="width: 70%; height: 100%;">
    <text style="font-size: 60rpx; padding: 30rpx;">醉翁亭(科技園店)</text>
    <text style="font-size: 30rpx; padding-left:30rpx">廣東省深圳市南山區科苑路科興科學園原味街A棟G層14號</text>
  </view>
  <view style="width: 30%; height: 100%;">
    <image src="../img/location.png" style="width:100%; height: 100%;"></image>
  </view>
</view>

佈局效果

3. 反饋
反饋頁面1代碼

<view class="container">
  <view class="title">
    <text>請選擇需要反饋的內容</text>
  </view>
  <view class="buttons">
    <view class="button" bindtap='navigatoTo' data-reason="地點不存在">
      <text>地點不存在</text>
      <image style="width:50rpx; height: 50rpx;" src='../img/icon_next.png'></image>
    </view>
    <view class="button" bindtap='navigatoTo' data-reason="門店已關">
      <text>門店已關</text>
      <image style="width:50rpx; height: 50rpx;" src='../img/icon_next.png'></image>
    </view>
    <view class="button" bindtap='navigatoTo' data-reason="門店信息有誤">
      <text>門店信息有誤</text>
      <image style="width:50rpx; height: 50rpx;" src='../img/icon_next.png'></image>
    </view>
    <view class="button" bindtap='navigatoTo' data-reason="門店違規">
      <text>門店違規</text>
      <image style="width:50rpx; height: 50rpx;" src='../img/icon_next.png'></image>
    </view>
  </view>
</view>

反饋頁面1佈局效果

反饋頁面2代碼

<view class="container">
  <view class="title">
    <text>反饋問題 :</text> <text style='color: black;'>{{reason}}</text>
  </view>
  <view class="input">
    <textarea placeholder='描述門店的違規內容(例如：含有侵權信息，違法違規內容、不合法資質證件照等)' maxlength='50' auto-focus="{{true}}"></textarea>
  </view>
  <view class="button">
    <button type='primary' style='width: 400rpx; height: 100rpx;'>提交</button>
  </view>
</view>

反饋頁面2佈局效果

知識點記錄

• 頁面路由時，導航和重定向的區別
  如官方文檔所說，在進行頁面路由時，微信會維護一個頁面棧，當從一個頁面的導航到另一個頁面時，之前的頁面入棧，再恢復到之前的頁面只需要點擊返回接口，不必重新加載。而使用重定向會將整個頁面棧清空，是無法通過返回按鈕返回之前的頁面的，唯一的方法是自己在頁面內提供一個導航回之前頁面的事件
• 導航的使用方法
  正常情況直接轉發到該頁面

wx.navigateTo({
	url: '../detail/detail'
});

帶參數轉發到該頁面

wx.navigateTo({
	url: '../detail/detail?problem=hello'
});

在目標頁面獲取轉發過來時帶的參數

onLoad: function (options) {
	this.setData({
		reason: options.problem	reason: options.problem
	});
},

• 圖片預覽
  重要的是後面的參數，指定預覽圖片的目標地址

wx.previewImage({
	current: '../img/store.png',	// 指定當前圖片位置
	urls: ['../img/store.png']	// 指定需要預覽的圖片列表，通過左滑右劃切換圖片
});

• 地圖的使用
  '‘使用時，需要嵌入在原生組件標籤內部，’‘需要嵌入在’'標籤內部
  地圖組件使用時必須提供經度和緯度，否則自動定位到北京

<map
  id="myMap"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers='{{covers}}'
  show-location='{{true}}'
>
	<cover-view class="locaton" bindtap='locate'>
	<cover-image class="coverImg" bindtouchstart='switchImg' bindtouchend='switchImg' data-src="{{locationSrc}}" src='{{locationSrc}}'></cover-image>  
	</cover-view>
</map>

• 頁面填滿整個屏幕的方式

#myMap {
	position: fixed;
	width: 100%;
	height: 100%;
}

• 各種佈局詳解
  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

代碼下載

這麼簡陋的代碼還是不要放在github上爲好，放在自己的CSDN資源下吧：https://download.csdn.net/download/zou8944/10672627