微信小程序外部引入方法

2022-11-20    分类: 微信小程序

网站建设- 建站教程 - 微信小程序 - 微信小程序外部引入方法

一、引入模板
小程序提供了两个引入外部模板的方法:import和include
使用外部模板可以实现大部分共同页面的代码利用,在一个app中,头部和脚部基本不会
变动太大,这时就可以通过模板的方式引入,实现多个页面的复用。

1.1 import

示例:

<!--view.wxml-->

<template name="view">

<text>{{text}}</text>

</template>

引入:

<import src="view.wxml"/>

<template is="view" data="{{text: 'forbar'}}"/>

注意:import有作用域,即import引入的模板只在当前页面有效,即import不会向下查找另外的模板

1.2 include

include标签可以看作是对 “html”的一个拷贝,即将外部的wxml片段拷贝进文档中
示例:
外部wxml片段

<!-- header.wxml -->

<view> header </view>

<!-- footer.wxml -->

<view> footer </view>

<!-- index.wxml -->

<include src="header.wxml"/>

<view> body </view>

总结:import是引入模板片段,且有作用域限制,不能进行模板嵌套。include是引入wxml片段,相当于代码拷贝。

二、WXSS 微信样式表
小程序中,页面样式的渲染通过wxss文件实现,.wxss可以看成是css,因为它们都在实现相同的功能。实质上wxss也是在css的基础之上进行了扩充和修改得到的。
wxss在css上的扩展特性:
1)、尺寸单位:rpx
rpx:是一个相对像素单位,可以根据屏幕宽度进行自适应。
针对移动端的开发,设计稿一般都是以iphone6为标准的。而iphone用的是视网膜屏,即我们css中设定的1px,在iphone上实际是由2px*2px的像素点组成的。
以iphone6为准,屏幕宽度375px,共有750个物理像素,则750rpx=350px,即1rpx=0.5px
2)、样式导入 @import
跟在css中的外部样式表的导入类似
@import "common.wxss";

分享名称:微信小程序外部引入方法
链接地址:/news38/215288.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有微信小程序

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

手机网站建设