微信小程序创建、页面配置、wxss

Myth丶恋晨 2021-07-24 23:35 534阅读 0赞

创建:
    	(1)文件名必须相同
    		index文件夹
    		index.js\.json\.wxml\.wxss
    		项目下
    		app.js、app.json、app.wxss
    	
    页面配置:
        "navigationBarBackgroundColor": "#CC0203",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "音乐界面",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
    
    基本组件:
      view:视图容器,类似div
      image: 默认宽度300px,高度225px;无img标签,标签上添加 mode='widthFix',使得图片自适应,不被压缩
      text:放置文本内容的标签
      block:不会在页面加载该标签,只是一个容器,只接收控制属性(wx:if、wx:for、wx:else),来控制其中的元素
    
    wxss:
    	(1)单位
    		rpx:可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。
    		如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
    		
    	(2)使用
    		page{	选中的就是整个页面
    			...
    			支持css的选择器
    		}
    		内联样式:
    		<view style="color:{
       {color}};background-color:blue" />	style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style 中,以免影响渲染速度。
    		<view class="class1 class2" />
    
    
    		
    	(3)导入其他wxss样式
    		@import "xx.wxss";	相同名称的选择器会进行样式的合并覆盖,覆盖时当前文件样式的优先级高

发表评论取消回复

表情：

评论列表（有 0 条评论，534人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序---wxss模板样式

微信小程序day02 学习笔记 wxss模板样式--介绍 wxss简介 wxss和css的关系 wxss模板样式--rpx

ゞ浴缸里的玫瑰/ 2023年10月07日 19:16/ 0 赞/ 87 阅读

相关微信小程序（WXSS样式文件）

课程大纲（1）WXSS简介（2）分类（3）尺寸单位rpx （4）样式导入@import （5）style内联样式（6）WXSS

桃扇骨/ 2023年06月15日 09:47/ 0 赞/ 24 阅读

相关微信小程序（WXSS样式文件）

【本节大纲】（1）WXSS简介（2）分类（3）尺寸单位rpx （4）样式导入@import （5）style内联样式（6）WXSS选择器（

梦里梦外;/ 2023年06月15日 09:44/ 0 赞/ 27 阅读

相关 6.微信小程序（WXSS样式文件）+微信小程序（WXSS选择器）

微信小程序（WXSS样式文件）+微信小程序（WXSS选择器）微信小程序（WXSS样式文件）：大纲（1）WXSS简介（2）分类（3）尺寸单位rpx

╰半夏微凉°/ 2023年06月15日 07:25/ 0 赞/ 26 阅读

相关微信小程序二（创建页面）

好了 hello world 创建好了，咱开始写页面了，那么如何创建一个简单的页面呢，废话不多说，开始撸代码新建一个页面需要以下几步， 1.

Love The Way You Lie/ 2022年07月15日 21:11/ 0 赞/ 251 阅读

相关微信小程序创建一个空白页面

小程序创建一个空白页面还是比较简单的。 pages文件夹下就是一个个页面组件想要新增页面组件则找到app.json里面的pages数组，然后添加一组数据即可得到一个页面组

绝地灬酷狼/ 2022年05月23日 08:11/ 0 赞/ 318 阅读

相关微信小程序wxss设置样式

[微信小程序wxss设置样式][wxss] 对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来一、wxml 界面结构wxmL

ゝ一纸荒年。/ 2022年01月31日 03:25/ 0 赞/ 1396 阅读

相关微信小程序之wxss：微信小程序教程系列13

WXSS（WeiXin Style Sheet）与CSS对应，用于描述页面的样式。特性内联样式：组件的 style 接收动态的样式，在运行时会进行

我不是女神ヾ/ 2021年12月04日 08:09/ 0 赞/ 507 阅读

相关 WXSS:微信小程序版CSS

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组

冷不防/ 2021年09月07日 18:50/ 0 赞/ 483 阅读

相关微信小程序创建、页面配置、wxss

创建: (1)文件名必须相同 index文件夹 index.js\.json\.wxml\.wxss 项目下

Myth丶恋晨/ 2021年07月24日 23:35/ 0 赞/ 535 阅读