2019-01-07 小程序記錄

1.今天再寫小程序的時候,加載背景圖的時候,使用本地圖片,模擬器能加載出來,預(yù)覽以及真機都加載不出來,通過實驗得之,在加載背景圖的時候,只能加載網(wǎng)絡(luò)圖片或者base64的圖片,本地圖片加載不出來,image可以加載本地圖片。

background: url('http://pic35.photophoto.cn/20150402/0011024033183316_b.jpg') no-repeat

2.使用組件scroll-view加載列表是的時候,橫向滾動,我們必須設(shè)置其相關(guān)屬性

scroll-x="true"
white-space: nowrap;
display: flex

在scroll-view里面的view子控件容器,我們使之變成行內(nèi)元素屬性

display: inline-block

3.控件設(shè)置毛玻璃,先設(shè)置一下樣式class{},在樣式里面寫入一下內(nèi)容

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera /
background-position: center;
background-size: cover;
-webkit-filter: blur(10px); /
Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);

這是對毛玻璃的樣式的設(shè)置, 如果需要在毛玻璃上放圖片或者text標簽,這是我們要使用 position屬性,具體使用flexed,還是relative,absolute這個需要根據(jù)業(yè)務(wù)需求來選擇,具體的自行寫入。

4.寫小程序的過程中,大家相比都會用到,web-view這個組件,我們就可以在小程序內(nèi)放置一個<web-view>組件來鏈接我們的HTML頁面了。在這之前,我們在小程序中沒有辦法整合我們已有的HTML程序(比如HTML5文章系統(tǒng),商城系統(tǒng)等),只能使用小程序的方式重新開發(fā)一套,現(xiàn)在有了<web-view>就可以方便的集成這些網(wǎng)頁系統(tǒng),為我們減少了可觀的工作量。

使用web-view組件顯示HTML頁面

<web-view src="https://www.baidu.com"></web-view>

很簡單這樣就可以使用了。如果木有微信小程序在后臺配置相關(guān)信息,只能真機有效。

當然也有不足之處

小程序的這個<web-view>總是自動鋪滿整個頁面,且每個頁面只能有一個<web-view>,它會覆蓋其他組件。也就是說,沒有辦法實現(xiàn)小程序界面組件和<web-view>頁面混排的情況,這點要注意。

在內(nèi)嵌的HTML頁面中跳轉(zhuǎn)回小程序


<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script>
// 跳轉(zhuǎn)到小程序的一個頁面
wx.miniProgram.navigateTo({url: '/path/to/page'})
</script>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容