天津时时lm0 http://www.itkkfn.icu 原創教程教程、攝影視頻教程、單反相機使用教程、數碼后期教程、人像攝影教程、風景攝影教程分離。 Tue, 27 Nov 2018 01:29:23 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.7.13 普通婚禮攝影流程及拍攝經驗分享 http://www.itkkfn.icu/index.php/archives/482 http://www.itkkfn.icu/index.php/archives/482#respond Tue, 27 Nov 2018 01:29:23 +0000 http://www.itkkfn.icu/?p=482 我拍了幾年的婚禮跟拍,總結了一些婚禮流程,大多是按這個來的,有婚禮跟拍愛好者可以關注關注。

首先是早上新娘化妝,一般新人在四五點開始化妝,然后通常我會在化妝完畢前約四十分鐘到達新人家里或者化妝的酒店。對新人的婚鞋、婚戒等進行拍攝。拍攝這類東西一般用微距鏡頭。可加一個補光燈。

新人化完妝后,會和伴娘、父母等合影。而在新人化妝過程中,可拍攝諸如閨密為新郎準備的娛樂節目,以及新人父母為婚禮當天做的準備。拍攝這個環節,我一般用24-70鏡頭。

新郎到達新娘家里后,就拍攝接親環節,由于婚房有的比較小。我通常使用16-35廣角鏡頭完成。拍攝可考慮多角度,比如新人表情,新人朋友的表情,盡可能的抓拍。少去擺拍,特別厭煩那種,新人和朋友們玩得正嗨的時候,攝像師突然說,先別急。。。。。。

隨后,就會在客廳為新娘的父母敬茶,這個時候,可以留意一下父母及親友團的表情。有的母親或者父親會流淚,而有的則會在新人出家門后,獨自坐在沙發上流淚。(曾經我就遇到過,新人都出門了,而留下孤單的父親默默坐在沙發上,擦拭眼淚),這些鏡頭都是十分珍貴的。

出門后,就要換成24-70或者85之類的長焦鏡頭,就拍外景了,外景就靠擺拍為主了,拍攝時可考慮簡單干凈的背景,以突出人物主體。

有的時候會到新郎家里,換新被,童男童女滾床單等,然后新人坐床,隨后新人為父母換新,互相吃湯圓或者面條等。

到達酒店后,就先拍攝一部分新人迎新的環節,再拍攝婚禮現場。婚禮現場一般要用三腳架,實在沒有,就把相機放在地上,用延遲拍攝,使用低感光度,小光圈,長時間曝光。

后面就是婚禮現場了,現場視光線而定,有的比較復雜,復雜的時候,用點測光,注意避開雜亂的背景。

基本就這些了。歡迎交流。

]]>
http://www.itkkfn.icu/index.php/archives/482/feed 0
微信小程序分享功能實現。 http://www.itkkfn.icu/index.php/archives/474 http://www.itkkfn.icu/index.php/archives/474#respond Wed, 17 Jan 2018 10:31:45 +0000 http://www.itkkfn.icu/?p=474 WXML代碼。

<button open-type=”share” bindtap=”onShareAppMessage” style=”width:80px;height:30px;margin-top:10px;margin-bottom:10px;line-height:30px;background:#84c225;”>分享</button>

里面有一個細節, open-type=”share”

這個很重要,

JS代碼。

onShareAppMessage: function () {
//分享
console.log(“測試分享功能。”)
return {
title: ‘沙子攝影教程’,
desc: ‘沙子推薦的優美音樂,以及沙子原創攝影作品。攝影教程分享’,
path: ‘/pages/teach/index’,
}
}

 

]]>
http://www.itkkfn.icu/index.php/archives/474/feed 0
微信小程序之地圖組件使用。 http://www.itkkfn.icu/index.php/archives/472 http://www.itkkfn.icu/index.php/archives/472#respond Tue, 16 Jan 2018 13:01:11 +0000 http://www.itkkfn.icu/?p=472 WXML代碼。

<map id=”map4select”
longitude=”{{longitude}}”latitude=”{{latitude}}”
markers=”{{markers}}”
scale=”20″
style=”width:{{map_width}}px;height:{{map_height}}px”
bindregionchange=”regionchange”
controls=”{{controls}}”>
</map>

app.js代碼。

App({
onLaunch: function () {
//調用API從本地緩存中獲取數據
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)
}
, getUserInfo: function (cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == “function” && cb(this.globalData.userInfo)
} else {
//調用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == “function” && cb(that.globalData.userInfo)
}
})
}
})
}
}
//get locationInfo
, getLocationInfo: function (cb) {
var that = this;
if (this.globalData.locationInfo) {
cb(this.globalData.locationInfo)
} else {
wx.getLocation({
type: ‘gcj02’, // 默認為 wgs84 返回 gps 坐標,gcj02 返回可用于 wx.openLocation 的坐標
success: function (res) {
that.globalData.locationInfo = res;
cb(that.globalData.locationInfo)
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
}
}
, globalData: {
userInfo: null
, locationInfo: null
}
})

JS代碼。

//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: ‘歡迎光臨沙子第一個微信小程序’,
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(‘button.open-type.getUserInfo’),
map_width: 380
, map_height: 380
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs’
})
},
onLoad: function () {
var that = this;
// 獲取定位,并把位置標示出來
app.getLocationInfo(function (locationInfo) {
console.log(‘map’, locationInfo);
that.setData({
longitude: locationInfo.longitude
, latitude: locationInfo.latitude
, markers: [
{
id: 0
, iconPath: “/pages/images/ic_position.png”
, longitude: locationInfo.longitude
, latitude: locationInfo.latitude
, width: 30
, height: 30
}
]
})
})
//set the width and height
// 動態設置map的寬和高
wx.getSystemInfo({
success: function (res) {
console.log(‘getSystemInfo’);
console.log(res.windowWidth);
that.setData({
map_width: res.windowWidth
, map_height: res.windowWidth
, controls: [{
id: 1,
iconPath: ‘/pages/images/ic_location.png’,
position: {
left: res.windowWidth / 2 – 8,
top: res.windowWidth / 2 – 16,
width: 30,
height: 30
},
clickable:false
}]
})
}
})
}
//獲取中間點的經緯度,并mark出來
, getLngLat: function () {
var that = this;
this.mapCtx = wx.createMapContext(“map4select”);
this.mapCtx.getCenterLocation({
success: function (res) {
that.setData({
longitude: res.longitude
, latitude: res.latitude
, markers: [
{
id: 0
, iconPath: “/pages/images/ic_position.png”
, longitude: res.longitude
, latitude: res.latitude
, width: 30
, height: 30
}
]
})
}
})
}
, regionchange(e) {
// 地圖發生變化的時候,獲取中間點,也就是用戶選擇的位置
if (e.type == ‘end’) {
this.getLngLat()
}
}
, markertap(e) {
console.log(e)
}
})

 

 

 

]]>
http://www.itkkfn.icu/index.php/archives/472/feed 0
微信小程序幻燈片簡單代碼 http://www.itkkfn.icu/index.php/archives/468 http://www.itkkfn.icu/index.php/archives/468#respond Tue, 16 Jan 2018 04:41:27 +0000 http://www.itkkfn.icu/?p=468 wxml

<view class=”haibao”>
<swiperindicator-dots=”{{indicatorDots}}”autoplay=”{{autoplay}}”interval=”{{interval}}”duration=”{{duration}}”style=”height:80px;”>
<blockwx:for=”{{imgUrls}}”>
<swiper-item>
<imagesrc=”{{item}}”style=”width:100%;height:80px;”></image>
</swiper-item>
</block>
</swiper>
</view>

JS

indicatorDots:false,
autoplay:true,
interval:5000,
duration:1000,
imgUrls:[
‘/images/haibao/1.jpg’,
‘/images/haibao/2.jpg’,
‘/images/haibao/3.jpg’
],

 

 

]]>
http://www.itkkfn.icu/index.php/archives/468/feed 0
微信小程序音樂播放器簡單代碼 http://www.itkkfn.icu/index.php/archives/466 http://www.itkkfn.icu/index.php/archives/466#respond Mon, 15 Jan 2018 06:13:45 +0000 http://www.itkkfn.icu/?p=466 目前功能,上一首,下一首,不知道是啥原因,使用bindended播放完畢事件。無效。所以就使用bindtimeupdate 去判斷currentTime和duration是否一致來粗暴實現。然后加了一個Math.flool,將數值整數化。解決音樂播放完畢后,播放下一首。

wxml代碼:

<view style=”text-align:center;margin-top:10px;margin-bottom:10px;”>
<audio poster=”{{poster}}” name=”{{name}}” author=”{{author}}” src=”{{src}}” id=”{{myAudio}}” controls loop bindtimeupdate=”funtimeupdate” bindended=”funended”>
</audio>
</view>
<view style=”display:flex;flex-direction:row;”>
<button type=”primary” bindtap=”audioNext” style=”width:120px;height:30px;line-height:30px;background:#cccccc;”>下一首</button>
<button type=”primary” bindtap=”audioPre” style=”width:120px;height:30px;line-height:30px;background:#cccccc;”>上一首</button>
</view>

JS代碼:

Page({
/**
* 頁面的初始數據 */
onReady: function (e) {
this.audioCtx = wx.createAudioContext(‘myAudio’, this),
this.audioCtx.play()
},
data: {
current:0,
myAudio:’myAudio’,
poster: ‘music.jpg’,
name: ‘測試’,
author: ‘測試’,
src: ‘6039.mp3’,
list: [{
id: 1,
poster: ‘music.jpg’,
name: ‘送別’,
author: ‘樸樹’,
src: ‘songbie.mp3’
}, {
id: 2,
poster: ‘zhaolei2.jpg’,
name: ‘我們的時光’,
author: ‘趙雷’,
src: ‘womendeshiguang.mp3’
}, {
id: 3,
poster: ‘hanggai.jpg’,
name: ‘杭蓋’,
author: ‘杭蓋樂隊’,
src: ‘hanggai.mp3’
}, {
id: 4,
poster: ‘zhaolei1.jpg’,
name: ‘成都’,
author: ‘沈蟲蟲’,
src: ‘chengdou.mp3’
}, {
id: 5,
poster: ‘maobuyi.jpg’,
name: ‘像我這樣的人’,
author: ‘毛不易’,
src: ‘xiangwozheyangderen.mp3’
}, {
id: 6,
poster: ‘maobuyi.jpg’,
name: ‘測試’,
author: ‘測試’,
src: ‘6039.mp3’
}
],
},
audioNext:function(){
if(this.data.current<5){
this.data.current++
console.log(this.data.current)
};
if (this.data.current == 5) {
this.data.current = 0;
console.log(this.data.current)
}
this.funPlayIndex(this.data.current)
},
audioPre:function(){
if (this.data.current >0) {
this.data.current–
console.log(this.data.current)
};
if (this.data.current == 0) {
this.data.current = 5;
console.log(this.data.current)
}
this.funPlayIndex(this.data.current)
},
funtimeupdate: function (u) {
//當前播放時間
// console.log(Math.floor(u.detail.currentTime));
//歌曲總時間
// console.log(Math.floor(u.detail.duration));
if (Math.floor(u.detail.currentTime) == Math.floor(u.detail.duration)){
console.log(“audio end”);
this.audioNext()
}
},
funended: function () {
console.log(“audio end”);
},
funPlayIndex(_current){
this.audioCtx.setSrc(this.data.list[_current].src),
this.audioCtx.play()
var page = this;
page.setData({ name: this.data.list[_current].name })
page.setData({ author: this.data.list[_current].author })
page.setData({ poster: this.data.list[_current].poster })
}
})

 

使用JS中函數與變量里需要加this.這是一個變化。

]]>
http://www.itkkfn.icu/index.php/archives/466/feed 0
為頁面中的變量賦值 http://www.itkkfn.icu/index.php/archives/464 http://www.itkkfn.icu/index.php/archives/464#respond Fri, 12 Jan 2018 06:08:17 +0000 http://www.itkkfn.icu/?p=464 在函數中為頁面中變量賦值。

var page=this;
page.setData({ name: this.data.list[1].name})
簡單播放器代碼。
Page({
/**
* 頁面的初始數據 */
onReady: function (e) {
this.audioCtx = wx.createAudioContext(‘myAudio’, this),
this.audioCtx.play()
},
data: {
myAudio:’myAudio’,
poster: ‘music.jpg’,
name: ‘送別’,
author: ‘樸樹’,
src: ‘樸樹-送別.mp3’,
list: [{
id: 1,
poster: ‘music.jpg’,
name: ‘送別’,
author: ‘樸樹’,
src: ‘樸樹-送別.mp3’
}, {
id: 2,
poster: ‘music.jpg’,
name: ‘我們的時光’,
author: ‘趙雷’,
src: ‘趙雷-我們的時光.mp3’
}, {
id: 3,
poster: ‘music.jpg’,
name: ‘杭蓋’,
author: ‘杭蓋樂隊’,
src: ‘ 杭蓋-杭蓋.mp3’
}],
},
audioPlay:function(){
this.audioCtx.play()
},
audioPause:function(){
this.audioCtx.pause();
},
audioNext:function(){
this.audioCtx.setSrc(this.data.list[1].src),
this.audioCtx.play()
var page=this;
page.setData({ name: this.data.list[1].name})
},
audioStart:function(){
this.audioCtx.seek(0);
},
})
]]>
http://www.itkkfn.icu/index.php/archives/464/feed 0
微信小程序里image圖片自適應屏幕 http://www.itkkfn.icu/index.php/archives/461 http://www.itkkfn.icu/index.php/archives/461#respond Sun, 07 Jan 2018 10:09:03 +0000 http://www.itkkfn.icu/?p=461 樣式文件。

.img{
width:100%;
}
HTML。
<image class=”img” src=”../../resources/8.jpg” mode=”widthFix”></image>
]]>
http://www.itkkfn.icu/index.php/archives/461/feed 0
app.json配置文件詳解 http://www.itkkfn.icu/index.php/archives/459 http://www.itkkfn.icu/index.php/archives/459#respond Sat, 06 Jan 2018 13:25:35 +0000 http://www.itkkfn.icu/?p=459 app.json文件用來對微信小程序進行全局配置,決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

以下是一個包含了所有配置選項的 app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

app.json 配置項列表

屬性 類型 必填 描述
pages String Array 設置頁面路徑
window Object 設置默認頁面的窗口表現
tabBar Object 設置底部 tab 的表現
networkTimeout Object 設置網絡超時時間
debug Boolean 設置是否開啟 debug 模式

pages

接受一個數組,每一項都是字符串,來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息,數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面,都需要對 pages 數組進行修改。

文件名不需要寫文件后綴,因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個文件進行整合。

如開發目錄為:

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

則需要在 app.json 中寫

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window

用于設置小程序的狀態欄、導航條、標題、窗口背景色。

屬性 類型 默認值 描述
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如”#000000″
navigationBarTextStyle String white 導航欄標題顏色,僅支持 black/white
navigationBarTitleText String 導航欄標題文字內容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字體、loading 圖的樣式,僅支持 dark/light
enablePullDownRefresh Boolean false 是否開啟下拉刷新,詳見頁面相關事件處理函數
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px

注:HexColor(十六進制顏色值),如”#ff00ff”

如 app.json :

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar

如果小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。

Tip:

  1. 當設置 position 為 top 時,將不會顯示 icon
  2. tabBar 中的 list 是一個數組,只能配置最少2個、最多5個 tab,tab 按數組的順序排序。

屬性說明:

屬性 類型 必填 默認值 描述
color HexColor tab 上的文字默認顏色
selectedColor HexColor tab 上的文字選中時的顏色
backgroundColor HexColor tab 的背景色
borderStyle String black tabbar上邊框的顏色, 僅支持 black/white
list Array tab 的列表,詳見 list 屬性說明,最少2個、最多5個 tab
position String bottom 可選值 bottom、top

其中 list 接受一個數組,數組中的每個項都是一個對象,其屬性值如下:

屬性 類型 必填 說明
pagePath String 頁面路徑,必須在 pages 中先定義
text String tab 上按鈕文字
iconPath String 圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,當 postion 為 top 時,此參數無效,不支持網絡圖片
selectedIconPath String 選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px ,當 postion 為 top 時,此參數無效

networkTimeout

可以設置各種網絡請求的超時時間。

屬性說明:

屬性 類型 必填 說明
request Number wx.request的超時時間,單位毫秒,默認為:60000
connectSocket Number wx.connectSocket的超時時間,單位毫秒,默認為:60000
uploadFile Number wx.uploadFile的超時時間,單位毫秒,默認為:60000
downloadFile Number wx.downloadFile的超時時間,單位毫秒,默認為:60000

debug

可以在開發者工具中開啟 debug 模式,在開發者工具的控制臺面板,調試信息以 info 的形式給出,其信息有Page的注冊頁面路由數據更新事件觸發 。 可以幫助開發者快速定位一些常見的問題。

page.json

每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多,只是設置 app.json 中的 window 配置項的內容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

頁面的.json只能設置 window 相關的配置項,以決定本頁面的窗口表現,所以無需寫 window 這個鍵,如:

屬性 類型 默認值 描述
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如”#000000″
navigationBarTextStyle String white 導航欄標題顏色,僅支持 black/white
navigationBarTitleText String 導航欄標題文字內容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字體、loading 圖的樣式,僅支持 dark/light
enablePullDownRefresh Boolean false 是否開啟下拉刷新,詳見頁面相關事件處理函數
disableScroll Boolean false 設置為 true 則頁面整體不能上下滾動;只在 page.json 中有效,無法在 app.json 中設置該項
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
]]>
http://www.itkkfn.icu/index.php/archives/459/feed 0
微信小程序開發工具下載地址 http://www.itkkfn.icu/index.php/archives/455 http://www.itkkfn.icu/index.php/archives/455#respond Thu, 04 Jan 2018 03:43:57 +0000 http://www.itkkfn.icu/?p=455 微信小程序開發工具下載地址

http://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

微信小程序體驗方法:

可能通過線下掃碼,微信搜索,公眾號關聯,好友分享,歷史記錄等五種方式。

]]>
http://www.itkkfn.icu/index.php/archives/455/feed 0
微信小程序開發教程手冊文檔 http://www.itkkfn.icu/index.php/archives/453 http://www.itkkfn.icu/index.php/archives/453#respond Wed, 03 Jan 2018 09:58:27 +0000 http://www.itkkfn.icu/?p=453 本教程將帶你一步步創建完成一個微信小程序,并可以在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像,點擊頭像,可以在新開的頁面中查看當前小程序的啟動日志。下載源碼

如果你需要開發微信小游戲,你可以查看:微信小游戲開發手冊文檔

1. 獲取微信小程序的 AppID

登錄 https://mp.weixin.qq.com ,就可以在網站的“設置”-“開發者設置”中,查看到微信小程序的 AppID 了,注意不可直接使用服務號或訂閱號的 AppID 。

微信小程序設置

注意:如果我們不是用注冊時綁定的管理員微信號,在手機上體驗該小程序,那么我們還需要操作“綁定開發者”。即在“用戶身份”-“開發者”模塊,綁定上需要體驗該小程序的微信號。本教程默認注冊帳號、體驗都是使用管理員微信號。

2. 創建項目

我們需要通過開發者工具,來完成小程序創建和代碼編輯。

開發者工具安裝完成后,打開并使用微信掃碼登錄。選擇創建“項目”,填入上文獲取到的 AppID ,設置一個本地項目的名稱(非小程序名稱),比如“我的第一個項目”,并選擇一個本地的文件夾作為代碼存儲的目錄,點擊“新建項目”就可以了。

為方便初學者了解微信小程序的基本代碼結構,在創建過程中,如果選擇的本地文件夾是個空文件夾,開發者工具會提示,是否需要創建一個 quick start 項目。選擇“是”,開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。

小程序組件

項目創建成功后,我們就可以點擊該項目,進入并看到完整的開發者工具界面,點擊左側導航,在“編輯”里可以查看和編輯我們的代碼,在“調試”里可以測試代碼并模擬小程序在微信客戶端效果,在“項目”里可以發送到手機里預覽實際效果。

3. 編寫代碼

創建小程序實例

點擊開發者工具左側導航的“編輯”,我們可以看到這個項目,已經初始化并包含了一些簡單的代碼文件。最關鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個。其中,.js后綴的是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件。微信小程序會讀取這些文件,并生成小程序實例

下面我們簡單了解這三個文件的功能,方便修改以及從頭開發自己的微信小程序。

app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API,如本例的同步存儲及同步讀取本地數據。想了解更多可用 API,可參考 API 文檔

//app.js
App({
  onLaunch: function () {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口背景色,配置導航條樣式,配置默認標題。注意該文件不可添加任何注釋。更多可配置項可參考配置詳解

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

創建頁面

在這個教程里,我們有兩個頁面,index 頁面和 logs 頁面,即歡迎頁和小程序啟動日志的展示頁,他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個頁面是小程序的首頁。

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁面結構文件。

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 class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

本例中使用了<view/><image/><text/>來搭建頁面結構,綁定數據和交互處理函數。

index.js 是頁面的腳本文件,在這個文件中我們可以監聽并處理頁面的生命周期函數、獲取小程序實例,聲明并處理數據,響應頁面交互事件等。

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    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.wxss 是頁面的樣式表:

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

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

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

頁面的樣式表是非必要的。當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。

index.json 是頁面的配置文件:

頁面的配置文件是非必要的。當有頁面的配置文件時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件,則在該頁面直接使用 app.json 中的默認配置。

logs 的頁面結構

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

logs 頁面使用 <block/> 控制標簽來組織代碼,在 <block/> 上使用 wx:for 綁定 logs 數據,并將 logs 數據循環展開節點。

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

運行結果如下:

小程序 運行結果

4. 手機預覽

開發者工具左側菜單欄選擇”項目”,點擊”預覽”,掃碼后即可在微信客戶端中體驗。

微信小程序預覽

 

原文地址。https://www.w3cschool.cn/wxagame/

 

]]>
http://www.itkkfn.icu/index.php/archives/453/feed 0
天津时时五星综合图走势图