在app.json中可以設定所有檔案的頭部導航顏色
（是window屬性的子屬性）
在具體頁面可以單獨設定該頁面的導航顏色
（直接寫該屬性，不需要寫window屬性）
查看官方檔案，可以看到好多全域屬性
而頁面配置會覆寫部分window配置
在post.json中添加：
{ "navigationBarTitleText":"文與字" }
可以實作導航的文字
在小程式中，有些時候使用絕對路徑會報錯，比如import
因此當你使用絕對路徑報錯時，可以嘗試換成相對路徑，也許問題就解決了，
js中的data屬于單向資料系結，data中改變的資料，在wxml中會自動更新
但是在wxml中改變的資料，不會同步更新到js中（可以通過事件來完成同步）
示例：
在posts.js的data中定義date
在posts.wxml中使用雙花括號系結資料
顯示
setData方法系結資料
通常從服務器加載的資料會放到onload函式中
在post.wxml中，使用雙花括號系結資料
<!--pages/posts/posts.wxml--> <view> <swiper indicator-dots="true" interval="5000" autoplay="true"> <swiper-item><image src="/images/wx.png"></image></swiper-item> <swiper-item><image src="/images/vr.png"></image></swiper-item> <swiper-item><image src="/images/iqiyi.png"></image></swiper-item> </swiper> </view> <view class="post-container"> <view class="post-author-date"> <image src="{{avatar}}" class="post-author"></image> <text class="post-date">{{date}}</text> </view> <text class="post-title">{{title}}</text> <image src="{{imgSrc}}" class="post-img"></image> <text class="post-content">{{content}}</text> <view class="post-like"> <image src="/images/icon/chat.png" class="post-like-img"></image> <text class="post-like-font">{{collection}}</text> <image src="/images/icon/view.png" class="post-like-img"></image> <text class="post-like-font">{{reading}}</text> </view> </view>
完成系結
雙花括號里面還可以進行一些運算，比如拼接字串
資料加減
條件渲染wx-if
wx-if的值，如果轉換為true，則元素顯示；轉換為false，則元素不顯示
通常會放一個變數，在js中定義好變數
給元素添加wx:if判斷，false代表不顯示
串列渲染wx-for
首先在onload函式中定義好資料，一般是陣列形式的
然后使用this.setData把資料傳遞到data中
要注意的是！傳遞的資料必須是js物件！如果是陣列，記得加上key轉換為物件形式
在wxml中，給要回圈的部分用block包起來，wx:for 屬性值填寫資料的key，wx:for-item里是回圈的每一項的別名
另一種比較簡單的陣列轉物件的方法：
這是ES6的物件簡寫方法，相當于{post_content: post_content}
小程式是支持es6語法的
另外，wx:for-item="item" 是可以洗掉的，回圈的每一項默認的別名就是item
如果你使用的別名不是item，則必須在該屬性中指明
獲取索引：
當然，如果不指定的話，默認索引就是index
小程式的事件機制——捕捉與回呼
實作點擊按鈕跳轉到另一個頁面
這是app.json，默認顯示的是welcome.wxml
如果要實作點擊按鈕，跳轉到另一個頁面，就需要用到小程式里的事件
查看官方檔案
這里我們要用到的事件是：tap
在welcome.wxml 中，給元素添加事件
屬性值是自定義的函式名
函式就寫在welcome.js里面
navicateTo是用來跳轉的方法
跳轉之后可以看到控制臺會有警告
一般來說只要使用了wx:for回圈就會有這個警告，不用去管它
如果非要處理，就加上wx:key隨便給個值就行
這樣就不會有警告了
使用navicateTo進行跳轉，跳轉成功之后，頁面上面有個回傳箭頭，點擊可以回傳上一頁
redirectTo 也是可以用來跳轉的，區別就是跳轉之后沒有回傳按鈕
使用navicateTo跳轉新頁面，原來的頁面會執行onhide，隱藏，因此能夠回傳
使用redirectTo跳轉新頁面，原來的頁面會執行onunload，卸載，因此無法回傳
可以在welcome.js里添加兩個函式列印查看
查看檔案
可以看到有很多回呼
當然，針對歡迎頁面來說，使用redirectTo會更好一些，因為歡迎界面一般只在打開時出現，且不會再回去
catch與bind
系結事件除了bind，也可以使用catch
區別：
bind 事件冒泡
只點擊父元素時，觸發父元素事件，不觸發子元素事件
同時點擊父元素和子元素時，先觸發子元素事件，后觸發父元素事件
catch 事件捕獲
只點擊父元素時，觸發父元素事件，不觸發子元素事件
同時點擊父元素和子元素時，只觸發子元素事件，不會冒泡到父元素
將業務資料分離到單獨的資料檔案中
新建data目錄，創建posts-data.js，把所有資料統一定義在里面
小程式里按住alt+shif+f可以快速將代碼格式化，如果忘了快捷鍵可以按F1查看所有快捷鍵
使用module.exports匯出資料
var local_database = [ { date: "Sep 18 2016", title: "正是蝦肥蟹壯時", imgSrc: "/images/post/crab.png", avatar: "/images/avatar/1.png", content: "徑訓蟹正肥，品嘗秋之味，徐志摩把,“看扯訓的荻蘆”和“到樓外樓吃蟹”,并列為秋天來杭州不能錯過的風雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，", reading: "112", collection: "96", headImgSrc: "/images/post/crab.png", author: "林白衣", dateTime: "24小時前", detail: "徑訓蟹正肥，品嘗秋之味，徐志摩把“看扯訓的荻蘆”和“到樓外樓吃蟹”并列為秋天來杭州不能錯過的風雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，殼凸紅脂塊塊香”；在《世說新語》里，晉畢卓更是感嘆“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣，”漫漫人生長路，美食與愛豈可辜負？于是作為一個吃貨，突然也很想回味一下屬于我的味蕾記憶，記憶中的秋蟹，是家人的味道，彌漫著濃濃的親情，\n\n是誰來自山川湖海，卻囿于晝夜，廚房與愛？ 是母親，深思熟慮，聰明耐心，吃蟹前，總會拿出幾件工具，煞有介事而樂此不疲，告訴我們螃蟹至寒，需要佐以姜茶以祛寒，在配備的米醋小碟里，亦添入姜絲與紫蘇，前者驅寒后者增香，泡好徑訓茶，歲月靜好，我們靜等，", postId: 0, music: { url: "http://music.163.com/song/media/outer/url?id=142604.mp3", title: "夜夜夜夜-齊秦", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000" } }, { title: "比利·林恩的中場故事", content: "一 “李安是一位絕不會重復自己的導演，本片將極富原創性李安眾所矚目的新片《比利林恩漫長的中場休息》，正式更名《半場無戰事》，", imgSrc: "/images/post/bl.png", reading: 62, detail: "一 “李安是一位絕不會重復自己的導演，本片將極富原創性”李安眾所矚目的新片《比利林恩漫長的中場休息》，正式更名《半場無戰事》，預告片首次曝光后，被視作是明年奧斯卡種子選手，該片根據同名暢銷書改編，原著小說榮獲美國國家圖書獎，也被BBC評為21世紀最偉大的12本英文小說之一，影片講述一位19歲德州男孩的比利·林恩入伍參加伊戰，在一次交火中他大難不死，意外與戰友成為大眾的關注焦點，并被塑造成英雄，之后他們回傳國內，在橄欖球賽中場休息時授勛，這名戰爭英雄卻面臨前所未有的心靈煎熬……李安為什么選中這部電影來拍？因為李安想要挑戰前所未有的技術難題：以120幀每秒的速度、4K、3D技術全面結合，來掀起一場電影視覺革命，什么意思？所謂“電影是24格每秒的謊言”，其中的24格，就是幀數，", collection: 92, dateTime: "24小時前", headImgSrc: "/images/post/bl.png", author: "迷的城", date: "Nov 20 2016", avatar: "/images/avatar/1.png", postId: 1, music: { url: "http://music.163.com/song/media/outer/url?id=108220.mp3", title: "鬼迷心竅-李宗盛", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000" } }, { //按住alt + shift + F 可以格式化代碼樣式 title: "當我們在談論經濟學時，我們在談論什么?", content: "引言在我跟學生課后交流時，以及我在知乎上閱讀有關“經濟”問題的論題時，經常會遇到這樣的情況：...", detail: "1 引言\n\n在我跟學生課后交流時，以及我在知乎上閱讀有關“經濟”問題的論題時，經常會遇到這樣的情況：有些人套用“經濟理論“的知識去解釋現實中發生的經濟事件，結果發現很多事情講不通，或者發現”理論告訴我們的“與現實發生的是相反的，也有學生經常跟我說：經濟學有什么用？為了說明這個，我經常從兩個方面來進行解釋，嘗試用我個人所擅長的解決問題的視角和他們能夠聽懂的方法來說明經濟學是什么，它的作用邊界在哪里：\r\n\n2 ”簡筆素描“與”油畫肖像“我們給人畫肖像畫，可以用簡筆素描，也可以用油畫肖像，油畫肖像可以在最大程度上保存了人物的各方面的細節和特點，而簡筆素描則忽略了很多細節，盡管簡筆素描忽略了人物的許多細節，但我們仍舊能夠很容易的認出畫中的人物是誰，為什么？因為這種方法保留了人物最顯著的特征，以至于我們可以忽略其次要特征而對人物做出判定，\n\n2.1 ”簡筆素描“對于絕大多數的非經濟學專業大眾而言（經濟學相關專業碩士學歷以上），人們所接觸到的經濟學都是初級微觀經濟學，所謂的初級微觀經濟學，對于經濟問題的”畫法“就是一種”簡筆素描“，比如初級微觀經濟學教材中廣為使用的這種一元一次需求函式：y=bx+a，需求量的唯一變數是產品價格，但僅憑直覺我們就可以斷言，現實中影響需求量的因素絕不止價格這一種，因此我們可以認為這個模型對經濟問題的描述是失真的，然而但這種失真卻是必要的和有意義的，其意義在與它利于揭示價格對于需求的影響，而不在于否定影響需求的其他因素——", imgSrc: "/images/post/sls.jpg", headImgSrc: "/images/post/sls.jpg", reading: 62, collection: 92, author: "知乎", date: "Nov 12 2016", dateTime: "三天前", avatar: "/images/avatar/3.png", postId: 2, music: { url: "http://music.163.com/song/media/outer/url?id=27538254.mp3", title: "女兒情-萬曉利", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004Wv5BO30pPc0.jpg?max_age=2592000" } }, { title: "微信·小程式開發工具安裝指南", content: "這兩天閑來無事，也安裝了 “微信折疊”的開發工具來玩一下，以下是一些小道訊息及使用體驗，過兩天我會寫一篇文章以開發者的角度來詳細評價微信小程式", imgSrc: "/images/post/xiaolong.jpg", reading: 102, detail: "這兩天閑來無事，也安裝了 “微信折疊”的開發工具來玩一下，以下是一些小道訊息及使用體驗，過兩天我會寫一篇文章以開發者的角度來詳細評價微信小程式:微信小程式不能開發游戲類、直播類功能，小程式每個人關注的上限是20個（還不確定，不過我相信這是真的，這次公布的API里并沒有視頻組件，微信太大，蘋果要有所顧忌，但是微信也要做出相應的讓步)微信目前有沒有同蘋果商談好，還是個未知數，畢竟會對AppStore有一定的沖擊，拋棄了大量的javascript組件后，這個生態體系變得相當的封閉，微信解釋肯定是：為了更好的性能提升，那么我們拭目以待，小程式的入口是微信里的三級選單，就是在“Tab欄發現里的游戲下面加入一個“小程式”，反正，這一欄里的購物和游戲我是從來沒點進去過的，以騰訊的尿性，小程式同服務號一樣，其關系鏈及重要功能的開放程度會因“人”而異，對，優質的介面只會開放給騰訊的兒子們（滴滴呀、京東呀）", collection: 92, dateTime: "24小時前", headImgSrc: "/images/post/xiaolong.jpg", author: "貓是貓的貓", date: "Nov 20 2016", avatar: "/images/avatar/5.png", postId: 3, music: { url: "http://music.163.com/song/media/outer/url?id=108119.mp3", title: "戀戀風塵-老狼", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000", } }, { title: "從視覺到觸覺 這款VR手套能給你真實觸感", content: "8月29日訊息，據國外媒體VentureBeat報道，一家名為Dexta Robotics的公司最近發布了一款有望變革虛擬現實手部追蹤與互動方式的新產品", imgSrc: "/images/post/vr.png", reading: 102, detail: "訊息，據國外媒體VentureBeat報道，一家名為Dexta Robotics的公司最近發布了一款有望變革虛擬現實手部追蹤與互動方式的新產品，該產品名為“Dexmo”，它是一款像手套那樣戴在手上使用的未來主義外骨骼，它內置大量的元件，能夠與VR體驗進行互動，可幫助你感覺握在你的雙手的虛擬物體，Dexmo據Dexta稱，“Dexmo是一款針對你的雙手的機械外骨骼，它能夠捕捉你的手部運動，以及提供即時的力反饋，有了Dexmo，你可以感受到虛擬物體的大小、形狀和堅硬度，你可以接觸數字世界，”市面上已經有數款產品旨在處理虛擬現實中的手部互動，也有相關的產品即將要進入市場，例如，頗受歡迎的HTC Vive頭盔配有一副控制器，其控制器能夠使得追蹤系統看到你的雙手，讓你可以用它們來在特定體驗中與物體進行互動，今年晚些時候，Oculus將開始出貨類似的手部控制產品Oculus Touch，10月，索尼也將開始出貨配備兩個PlayStation Move手部控制器的PS VR，Leap Motion甚至更進一步：利用傳感器來追蹤手指和手部的運動，", collection: 26, dateTime: "24小時前", headImgSrc: "/images/post/vr.png", author: "深白色", date: "Nov 20 2016", avatar: "../../../images/avatar/3.png", postId: 4, music: { url: "http://music.163.com/song/media/outer/url?id=188204.mp3", title: "沉默是金-張國榮", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003at0mJ2YrR2H.jpg?max_age=2592000" } }, { title: "愛奇藝創維開展戰略合作，合力布局開放娛樂生態", content: "愛奇藝和創維分別作為國內領先的在線視頻品牌", imgSrc: "/images/iqiyi.png", reading: 96, detail: "愛奇藝和創維分別作為國內領先的在線視頻品牌和家電品牌，雙方一直銳意創新，為用戶提供優質的服務體驗和產品體驗，據悉，愛奇藝與創維將展開從資本到VIP會員服務等各方面的深入合作，籍由此次合作，愛奇藝將戰略投資創維旗下擁有高端互聯網電視品牌的酷開公司，從下一財年開始，創維旗下互聯網電視將通過銀河互聯網電視集成播控平臺，預置VIP會員服務及相關內容，這種捆綁終端與VIP內容的全新銷售模式，將大幅提升互聯網電視終端用戶的體驗，給予用戶更多優質內容的選擇，", collection: 26, dateTime: "21小時前", headImgSrc: "/images/iqiyi.png", author: "深白色", date: "Nov 20 2016", avatar: "../../../images/avatar/5.png", postId: 5, music: { url: "http://music.163.com/song/media/outer/url?id=152428.mp3", title: "朋友-譚詠麟", coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000" } }, ]; var mydata="https://www.cnblogs.com/chenyingying0/p/cyy"; //匯出資料（可以同時匯出多個資料） module.exports = { postList: local_database, cyy:mydata }
使用require加載JS模塊檔案（必須是相對路徑，不能是絕對路徑！！！）
在posts.js中，使用require引入剛才的資料posts-data.js，然后用一個變數來接識訓出的資料
列印出來可以查看獲取到的資料
完整的posts.js代碼
// pages/posts/posts.js var postsData=https://www.cnblogs.com/chenyingying0/p/require("../../data/posts-data.js");//引入資料 console.log(postsData); Page({ /** * 頁面的初始資料 */ data: { date:"Mar 23 2020" }, /** * 生命周期函式--監聽頁面加載 */ onl oad: function (options) { this.setData({ post_key:postsData.postList });//將資料傳遞到data中 } })
template 模板的使用
提取出可重復使用的模塊
在posts目錄下新建目錄post-item，然后在目錄中創建post-item-template.wxml和post-item-template.wxss
post-item-template.wxml
定義模板，name屬性是模板名
<template name="postItem"> <view class="post-container"> <view class="post-author-date"> <image src="{{item.avatar}}" class="post-author"></image> <text class="post-date">{{item.date}}</text> </view> <text class="post-title">{{item.title}}</text> <image src="{{item.imgSrc}}" class="post-img"></image> <text class="post-content">{{item.content}}</text> <view class="post-like"> <image src="/images/icon/chat.png" class="post-like-img"></image> <text class="post-like-font">{{item.collection}}</text> <image src="/images/icon/view.png" class="post-like-img"></image> <text class="post-like-font">{{item.reading}}</text> </view> </view> </template>
使用import匯入模板檔案，可以是絕對路徑也可以是相對路徑
呼叫模板時，is屬性指定模板名，data屬性傳入資料
<!--pages/posts/posts.wxml--> <import src="post-item/post-item-template.wxml" /> <view> <swiper indicator-dots="true" interval="5000" autoplay="true"> <swiper-item><image src="/images/wx.png"></image></swiper-item> <swiper-item><image src="/images/vr.png"></image></swiper-item> <swiper-item><image src="/images/iqiyi.png"></image></swiper-item> </swiper> </view> <block wx:for="{{post_key}}"> <template is="postItem" data="{{item}}" /> </block>
實際上template只是占位符，在運行時會被替換
因此雖然模板中沒有樣式，但是頁面里是有樣式的
可以在控制臺中查看
現在需要把頁面中的相關樣式也分離到模板樣式中
把posts.wxss中的相關代碼拷貝到post-item-template.wxss
.post-container{ display: flex; flex-direction: column; margin-top:20rpmx; margin-bottom:40rpx; background:#fff; border-top:1px solid #ededed; border-bottom:1px solid #ededed; padding-bottom:10rpx; } .post-author-date{ margin:10rpx 0 20rpx 10rpx; display: flex; align-items: center; } .post-author{ height:60rpx; width:60rpx; } .post-date{ margin-left:20rpx; font-size:26rpx; } .post-title{ font-size:34rpx; font-weight:600; margin-bottom:20rpx; margin-left:20rpx; color:#333; } .post-img{ width:100%; height:340rpx; margin-bottom:15rpx; } .post-content{ font-size:28rpx; color:#666; letter-spacing: 2rpx; margin:0 0 20rpx 20rpx; } .post-like{ font-size:26rpx; margin-left:20rpx; display: flex; align-items: center; } .post-like-img{ width:32rpx; height:32rpx; margin-right:16rpx;
然后在posts.wxss中引入模板樣式
使用@import
/* pages/posts/posts.wxss */ @import "post-item/post-item-template.wxss"; swiper{ width:100%; height:600rpx; } swiper image{ width:100%; height:600rpx; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/139992.html
標籤：JavaScript