【嘗新】微信小程序初體驗

文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434

 

根據文檔地址中下載微信開發工具后，按照文檔指引可以創建一個快速體驗的小demo ，樣例中的文件說明如下：

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

app.js	是	小程序邏輯
app.json	是	小程序公共設置
app.wxss	否	小程序公共樣式表

 

 

 

一個小程序頁面由四個文件組成，分別是：

文件類型	必填	作用
js	是	頁面邏輯
wxml	是	頁面結構
wxss	否	頁面樣式表
json	否	頁面配置

 

 

 

 

 

為了學習下API的調用，體驗了下【獲取坐標位置】和【根據坐標查看地址】兩個接口，更多接口信息請查看：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161122

或者直接下載源碼：https://mp.weixin.qq.com/debug/wxadoc/dev/demo/demo.zip?t=20161122

簡單貼一下體驗的小程序相關目錄和內容：

目錄結構： 未打開的文件夾就是根據文檔指引快速生成的默認內容，未做修改

format-location.js中的內容：

function formatLocation(longitude, latitude) {
  longitude = longitude.toFixed(2)
  latitude = latitude.toFixed(2)

  return {
    longitude: longitude.toString().split('.'),
    latitude: latitude.toString().split('.')
  }
}

module.exports = formatLocation

　index.js

var formatLocation = require('./format-location.js')
//index.js
//獲取應用實例
var app = getApp()
Page({
  getLocation: function () {
    var that = this
    wx.getLocation({
      success: function (res) {
        console.log(res)
        that.setData({
          hasLocation: true,
          location: formatLocation(res.longitude, res.latitude)
        })
      }
    })
  },
  openLocation: function (e) {
    console.log(e)
    var value = e.detail.value
    console.log(value)
    wx.openLocation({
      longitude: Number(value.longitude),
      latitude: Number(value.latitude),
      name: value.name,
      address: value.address
    })
  },
  data: {
     markers: [{
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 創意園',
      desc: '我現在的位置'
    }],
    covers: [{
      latitude: 23.099794,
      longitude: 113.324520,
      iconPath: '../images/car.png',
      rotate: 10
    }, {
      latitude: 23.099298,
      longitude: 113.324129,
      iconPath: '../images/car.png',
      rotate: 90
    }],
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

　index.json

{
 "debug": true,
 "navigationBarTitleText": "查看位置"
}

　index.wxml

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
</view>
 <view class="page-body">
    <view class="page-body-wrapper">
      <view class="page-body-info">
        <text class="page-body-text-small">當前位置經緯度</text>
        <block wx:if="{{hasLocation === false}}">
          <text class="page-body-text">未獲取</text>
        </block>
        <block wx:if="{{hasLocation === true}}">
          <view class="page-body-text-location">
            <text>E{{location.longitude[0]}}°{{location.longitude[1]}}′</text>
            <text>N{{location.latitude[0]}}°{{location.latitude[1]}}′</text>
          </view>
        </block>
      </view>
      <view class="page-body-buttons">
        <button class="page-body-button" type="primary" bindtap="getLocation">獲取位置</button>
      </view>
    </view>
  </view>
<view class="container">
  <view class="page-body">
    <view class="page-body-wrapper">
      <form bindsubmit="openLocation">
        <view class="page-body-form">
          <view class="page-body-form-item">
            <text class="page-body-form-key">經度</text>
            <input class="page-body-form-value"  value="{{location.longitude[0]}}.{{location.longitude[1]}}" name="longitude"></input>
          </view>
          <view class="page-body-form-item">
            <text class="page-body-form-key">緯度</text>
            <input class="page-body-form-value"   value="{{location.latitude[0]}}.{{location.latitude[1]}}" name="latitude"></input>
          </view>
          <view class="page-body-form-item">
            <text class="page-body-form-key">位置名稱</text>
            <input class="page-body-form-value"   value="我的位置" name="name"></input>
          </view>
          <view class="page-body-form-item" style="border-bottom: none;">
            <text class="page-body-form-key">詳細位置</text>
            <input class="page-body-form-value"   value="" name="address"></input>
          </view>
        </view>
        <view class="page-body-buttons">
          <button class="page-body-button" type="primary" formType="submit">查看位置</button>
        </view>
      </form>
    </view>
  </view>
</view>

　　index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: orangered;
}

　下面是幾個運行圖片：

首頁：頁面布局對應 index.wxml中的內容，頁面中的值根據index.js獲取

 

點擊獲取位置按鈕之后：

點擊查看位置：其實我是將獲取到的位置 經緯度的值插入到查看位置的內容中去了

• 因為目前小程序不支持發布，只能在本地查看，必須使用指定的微信號掃二維碼之后才能預覽效果（開發工具左側--項目--預覽 按鈕）
• 查看位置的時候如果是手機掃描的話，在自己手機上打開后然后點擊【去這里】可以獲取到手機上安裝的導航app，點擊后可以進行喚醒（這個應該是微信一直都有的，不過之前沒怎么接觸過這個接口）
• 建議在 .json 文件中添加 "debug": true 開啟調試模式
• .json 中不允許添加任何注釋，否則可能會報錯，請注意

好了，初體驗結束，總是跟之前進行公眾號開發一樣，總會遇到各種坑，慢慢來就好了末尾再放一個 
微信小程序常見問題集合：

轉載自：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=23