微信小程序外部引入方法

2020-11-11  |  阅读:  |  文章来源:佛山网站建设

  一、引入模板 
小程序提供了两个引入外部模板的方法: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";

上一篇:微信来抢淘宝们的生意了!“商品搜索”功能将改写电商生态? 下一篇:佛山企业适合开发什么样微信小程序?

微信小程序

联系建站公司
佛山市顺德区大良凤翔商业广场二座670
网站建设/网站优化:13715431176
建站公司业务邮箱:sale@fslingdu.com
专业业务范围: 找公司建网站 广州网站建设 免费建站 如何自己建一个网站 建网站多少钱 如何制作网站 免费一键搭建网站 网站建设方案 为您提供一站式网站规划服务
粤ICP备16067714号-3
Copyright © 佛山市区零度飞易信息科技有限公司