配置導航欄

導航欄是小程序的門戶，用戶進來第一眼看到的便是導航欄，其起著對當前小程序主題的概括。而我們?新建的小程序?時，第一步變開始配置導航欄。如下：

配置tabBar

因為配置tabBar需要借助字體圖標，我這里平常喜歡使用阿里云字體圖標庫，所以需要先去阿里云庫中找到相關(guān)圖標：其官方網(wǎng)站：網(wǎng)站鏈接?。

隨便找兩個，一個作為未點擊(未激活)狀態(tài)，另一個作為已點擊(已激活)狀態(tài)：

圖標就隨便選了，在正式項目必須嚴謹了，選好圖標命名如下

準備好圖片資源之后就要在 app.json 文件中配置tabBar了，配置代碼如下：

{"pages":["pages/home/home","pages/message/message","pages/contact/contact","pages/logs/logs","pages/logins/logins","pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#008c8c","navigationBarTitleText": "阿里工作臺","navigationBarTextStyle":"white"},"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首頁","iconPath": "/images/tabBar/home.png","selectedIconPath": "/images/tabBar/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "/images/tabBar/message.png","selectedIconPath": "/images/tabBar/message-active.png"},{"pagePath": "pages/contact/contact","text": "聯(lián)系我們","iconPath": "/images/tabBar/contact.png","selectedIconPath": "/images/tabBar/contact-active.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

頁面跳轉(zhuǎn)

打開pages/cart/cart.wxml，添加跳轉(zhuǎn)按鈕，代碼如下：

<view class="container"><button bindtap="btnTap" type="primary">跳轉(zhuǎn)到登錄頁</button>
</view>

打開pages/cart/cart.js，添加跳轉(zhuǎn)按鈕，代碼如下：

// 獲取應用實例
const app = getApp()
Page({/*** 頁面的初始數(shù)據(jù)*/data: {},// 事件處理函數(shù)
btnTap() {wx.navigateTo({url: '/pages/logins/logins',})
},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options) {},

這時候界面如下：點擊"跳轉(zhuǎn)到第二頁"按鈕，頁面跳轉(zhuǎn)到logins

每一頁都是一個webview，wx.navigateTo每打開一個頁面，就是打開一個webview。

需要注意的是:wx.navigateTo打開頁面的棧的數(shù)量上限是10個，也就是說最多可以連續(xù)打開10個頁面。

獲取地理位置

這里主要要使用到wx.getLocation，用于獲取當前位置信息，代碼如下：

// pages/cart/cart.js//獲取當前位置信息
btnTapGet() {console.log("打開");wx.getLocation({type: 'wgs84',success(res) {console.log(res);}});
},btnTapChoose() {console.log("打開");wx.chooseLocation({success(res) {console.log(res);}});
},

點擊按鈕，執(zhí)行btnTapGet方法，首先會彈出授權(quán)

以下獲取地理位置信息的API，需要在app.json做申明配置：

  "requiredPrivateInfos": ["getLocation","chooseLocation"],

(二) 工具類文件

目錄中有一個“utils”文件夾，它用來存放工具欄的js 函數(shù)，如放置日期格式化函數(shù)，時間格式化函數(shù)，等一些常用的函數(shù)。定義完這些函數(shù)后， 要通過module.exports將定義的函數(shù)名稱注冊進來，在其他的頁面才可以使用，如圖所示為時間格式化工 具類文件。

在utils.js中自定義公共函數(shù)并導出

• 自定義函數(shù)如下！務必自行配置導出?

//自定義方法
function toStr(e){return e="你好,"+e
}module.exports = {formatTime,toStr //方法名即可，多個用逗號分開
}

在index.js中引入公共文件util.js 并進行頁面初始化賦值操作

import util from "../../utils/util"

在onLoad函數(shù)中進行操作

 this.setData({/*loginTime: formatTime(new Date()),motto: "您好! Jone" */loginTime: util.formatTime(new Date()),motto: util.toStr('張三')

(五) 自定義函數(shù)

.js：頁面的 JavaScript 邏輯代碼

除了初始化數(shù)據(jù)和生命周期函 數(shù)，Page 中還可以定義一些特殊 的函數(shù)：事件處理函數(shù)。在渲染層 可以在組件中加入事件綁定，當達 到觸發(fā)事件時，就會執(zhí)行 Page 中 定義的事件處理函數(shù)。

Page 是一個頁面構(gòu)造器，這個構(gòu)造器就生成了一個頁面。在生成頁面的時候，小程序框架會把 data 數(shù)據(jù)和 index.wxml 一起渲染出最終的結(jié)構(gòu)，于是就得到了你看到的小程序的樣子。

在渲染完界面之后，頁面實例就會收到一個 onLoad 的回調(diào)，你可以在這個回調(diào)處理你的邏輯

// pages/logins/logins.js
Page({/*** 頁面的初始數(shù)據(jù)*/data: {},onTap() {wx.showToast({title: 'Hello World',icon: 'success',duration: 2000})},clickMe: function() {  console.log('view tap')},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options) {},

WXML 模板

.wxml：頁面的 WXML 模板文件

<view bindtap="clickMe"> click me </view><button class="button" bindtap="onTap">Click Me</button>

組件

小程序提供了豐富的基礎組件給開發(fā)者，開發(fā)者可以像搭積木一樣，組合各種組件拼合成自己的小程序

例如，你需要在界面上顯示地圖，你只需要這樣寫即可：

使用組件的時候，還可以通過屬性傳遞值給組件，讓組件可以以不同的狀態(tài)去展現(xiàn)，例如，我們希望地圖一開始的中心的經(jīng)緯度是廣州，那么你需要聲明地圖的 longitude(中心經(jīng)度) 和 latitude(中心緯度) 兩個屬性:

組件的內(nèi)部行為也會通過事件的形式讓開發(fā)者可以感知，例如用戶點擊了地圖上的某個標記，你可以在 js 編寫 markertap 函數(shù)來處理：

當然你也可以通過 style 或者 class 來控制組件的外層樣式，以便適應你的界面寬度高度等等。

<map bindmarkertap="markertap" longitude="廣州經(jīng)度" latitude="廣州緯度"></map>

wx.getLocation({type: 'wgs84',success: (res) => {var latitude = res.latitude // 經(jīng)度var longitude = res.longitude // 緯度}
})

調(diào)用微信掃一掃能力，只需要：wx.scanCode({success: (res) => {console.log(res)}
})

(六) setData設值函數(shù)

Page.prototype.setData()設值函數(shù)：setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時 改變對應的 this.data 的值。
setData() 參數(shù)格式：接受一個對象，以 key、value 的形式表示將 this.data 中的 key 對應的 值改變成 value。
其中， key 可以非常靈活，以數(shù)據(jù)路徑的形式給出，如 array[2].message，a.b.c.d，并且不 需要在this.data 中預先定義。
?