文章目錄

• 小程序項目
• • templates/temp/temp.wxml
  • templates/temp/temp.wxss
  • pages/test/test.json
  • pages/test/test.wxml
  • pages/test/test.wxss
  • pages/test/test.js
• 相關鏈接

小程序項目

1. 定義模板。
項目根目錄下新建文件夾：templates，用于存放模板。
文件夾templates下新建文件夾：temp，temp下新建文件：temp.wxml和temp.wxss。
temp.wxml中，通過 <template name=""></template> 定義模板。
2. 新建頁面。
小程序根目錄下新建文件夾：test，在文件夾test下新建Page：test。
3. 目標頁面中使用模板。
目標頁面的wxml文件通過<import src=""/>引入模板的wxml文件。
目標頁面的wxml文件通過 <template is=""></template> 使用模板。
目標頁面的wxss文件得通過@import ""引入模板的wxss文件。

代碼涉及的主要文件有：

templates/temp/temp.wxml

templates/temp/temp.wxss

pages/test/test.json

pages/test/test.wxml

pages/test/test.wxss

pages/test/test.js

templates/temp/temp.wxml

<!-- 定義模板 --> <template name="my-template"><view class="user-box"><image class="avatar" src="{{avatarUrl}}"/><view class="username">{{username}}</view></view> </template>

templates/temp/temp.wxss

.user-box{text-align: center; } .user-box .avatar{width: 300rpx;height: 300rpx;border-radius: 50%; } .user-box .username{font-size: 48rpx;font-family:fantasy;color: #1761d8;height: 80rpx;line-height: 80rpx; }

pages/test/test.json

{"usingComponents": {},"navigationBarBackgroundColor": "#eee","navigationBarTextStyle": "black","navigationBarTitleText": "我的" }

pages/test/test.wxml

<import src="/templates/temp/temp.wxml"/><view class="test-container"><template is="my-template" data="{{...user}}"></template> </view>

pages/test/test.wxss

@import "/templates/temp/temp.wxss";.test-container{height: 100%;background: #eee; }

pages/test/test.js

Page({data:{user:{username:"Mr Duck",avatarUrl:"/static/images/avatar.png"}} })

相關鏈接

小程序中自定義組件
WXML語法參考>模板
WXML語法參考>引用

總結

以上是生活随笔為你收集整理的微信小程序中自定义模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。