2024年9月微信小程序样式wxss的功能（微信小程序解决夜间和白天模式）

　　⑴微信小程序样式wxss的功能（微信小程序解决夜间和白天模式

　　⑵微信小程序解决夜间和白天模式

　　⑶首先写出小程序的夜间模式的样式wxss.在切换夜间模式的时候将原本的样式覆盖掉.在每一个页面加载的时候判断一下是否切换黑夜模式(可以写在公共的变量中,在每一个页面取出变量进行判断).wxml.wxss.js

　　⑷写给Android开发者看的『微信小程序和Android开发的对比』

　　⑸微信小程序近期可谓是动作频出，仅最近新增的能力就有：

　　⑹种种迹象表明，微信对小程序的期望值是很大，所以在它推出的几个月效果没到达预期的情况下，之前的很多『克制』也就逐渐变成『放肆』了——不过不管小程序以后的发展到底怎样，对我们开发者来发，多了解一些总是没有坏处的。

　　⑺他山之石，可以攻玉。对于是技术人来说，多了解一些不同的技术、不同的开发模式、不同的架构思想，提高技术『广度』，对于自己的成长是十分必要的。所以，本文就是从一个Android开发者的角度，从项目工程方便切入，来分析一下『微信小程序』跟『AndroidApp』开发上的一些异同。『微信小程序』开发是一个相对较新的技术，希望通过本文，能让你对它多一些了解。

　　⑻因为内容是从Android开发的角度来谈的，所以我假设你已经对Android开发比较熟悉了。并且对微信小程序的开发也比较感兴趣，如果要是再能有些javascript、css的基础的话那就更好了！

　　⑼Android开发我们已经比较熟悉——

　　⑽作为对比，进行微信小程序开发所用的语言是这些——

　　⑾wxml(WeiXinMarkupLanguage)基本约等于是xml。微信之所以没有直接使用xml，可能是为了以后扩展方便一些（野心很大。同理，wxss(WeiXinStyleSheets)基本约等于是css。也是微信扩展了一些功能，比如统一的尺寸单位rpx。

　　⑿对于Android来说，对于页面的描述基本上在xml中定义的，比如：

　　⒀这是一个简单的典型的示例，这个文件就是描述了两部分内容：

　　⒁some.wxss:

　　⒂很明显可以看出：wxml是负责了页面结构的展示；而wxss则负责了对页面样式的定义。这种把结构和样式分离的做法，其实是延续了网页开发中的习惯（html+css。这样做的好处起码有两个：

　　⒃——看起来还是挺简单的结构:

　　⒄这三个文件用以描述小程序app相关的内容，他们的命名是固定这样的，位置也固定是在根目录下。

　　⒅app.js基本相当于Android中的Application类，文件中主要是有一个App()函数，来进行小程序的初始化操作。

　　⒆app.json的作用跟Android中的AndroidMainifest.xml文件很相似——都是静态化的配置文件。

　　⒇app.wxss定义全局的样式——其定义的样式会作用于每个页面。比如在app.wxss中加入：

　　⒈就可以给所有的text控件添加px的padding。当然，页面本身的xxPage.wxss可以定义局部样式来覆盖全局样式。

　　⒉根目录下的utils文件夹中有一个util.js文件，这个故名思意，是类似于Java中的一些工具类的存在。utils文件夹其实是一个非必须的结构，而它之所以出现在官方的HelloWorld工程中，是作为一个代表，表明了开发者在这里是可以自定义新的文件夹和结构的。微信小程序作为一个使用js来开发的平台，是可以使用许多第三方的js库的，对于这些第三方库，以及其他的图片资源等，都可以放到自定义的文件夹中。

　　⒊pages文件夹下包含两个子目录：index和logs，两个目录的结构都是基本一样的，都是包含四个相同主名称的文件：xx.js、xx.wxml、xx.json、xx.wxss这几个文件。这样的一个典型结构表明它是一个小程序的页面，四个文件的作用分别是：

　　⒋在视图的动态显示上，微信小程序使用了数据绑定（data-binding的方式。如果你之前使用过AngularJS或者Vue.js等这些流行的js框架，那么你肯定对数据绑定并不陌生。它是一种把一个控件的属性绑定到某个数据对象（view-model的属性的方法，这样在改变数据对象属性的时候，所对应的控件属性也就会相应变化——在开发中，这种方式会使得对View层的显示控制变得十分简单、自然。基于此，软件工程的流行架构方式也在之前的MVC、MVP之外，又多了一个——MVVM（Model-View-ViewModel。数据绑定这种方式现在是如此的流行，以致于Android官方都出了一个[DataBindingLibra如果你之前恰好已经有过一些js的使用经验，那就不用多说了，花半个小时看一下小程序的文档，直接上！

　　⒌有什么作用下,wxss,wxll,js,json各个部分

　　⒍wxss相当于网页中的css，是用来控制微信小程序页面样式显示的。wxml是微信小程序中的页面，类似于网页中的html页面。js是用来请求api，为页面赋值等的一些功能性处理函数。json是一些配置性的设置。

　　⒎如何快速开发个微信小程序

　　⒏无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学习新一门开发技术，只要你解决了这四个问题，那一切就OK了，下面我就讲一下，我在学习微信小程序开发，如何用这四步法快速上手开发的学习一门新技术先看下它的开发文档小程序介绍然后呢就是开始一些准备的步骤，微信公众平台提供我们开发管理的功能微信工作平台账号注册小程序信息配置请看小程序开发步骤小程序项目的创建到此第一个问题我们就算完成了，接下来解决小程序界面如何搭建。然后最重要的，微信提供自己的开发者工具，不需要用chrome什么调试，微信开发者工具提供wxapi的调用测试能力，这些在chrome里面是测试不了的框架的视图层由WXML与WXSS编写，由组件来进行展示。将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。WXML(WeiXinMarkuplanguage)用于描述页面的结构。WXS(WeiXinScript)是小程序的一套脚本语言，结合WXML，可以构建出页面的结构。WXSS(WeiXinStyleSheet)用于描述页面的样式。小程序的页面是由wxml和wxss这两个文件来实现的，wxml结构如何写请参考微信小程序组件wxss是负责样式控制的，基本类似于css,支持flex布局，所以要想上手构建微信小程序的界面，最好要熟悉html,css.还有最重要的就是生命周期了//index.jsPage({?data:{??text:“Thisispagedata.“?},?onLoad:function(options){??//页面创建时执行?},?onShow:function(){??//页面出现在前台时执行?},?onReady:function(){??//页面首次渲染完毕时执行?},?onHide:function(){??//页面从前台变为后台时执行?},?onUnload:function(){??//页面销毁时执行?},?onPullDownRefresh:function(){??//触发下拉刷新时执行?},?onReachBottom:function(){??//页面触底时执行?},?onShareAppMessage:function(){??//页面被用户分享时执行?},?onPageScroll:function(){??//页面滚动时执行?},?onResize:function(){??//页面尺寸变化时执行?},?onTabItemTap(item){??//tab点击时执行??console.log(item.index)??console.log(item.pagePath)??console.log(item.text)?},?//事件响应函数?viewTap:function(){??this.setData({???text:’Setsomedataforupdatingview.’??},function(){???//thisissetDatacallback??})?},?//自由数据?customData:{??hi:’MINA’?}})微信提供的界面组件很多，没必要一下子全学会，会用一两个就行，其他的遇到需要的时候现查先做，这样又节约学习时间，又能够加深理解。到此第二个问题我们解决了，下面看第三个问题，数据逻辑如何处理。数据定义数据展现逻辑处理是通过js文件来操作的一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写?JS?脚本文件来处理用户的操作。《view》{{msg}}《/view》《buttonbindtap=“clickMe“》点击我《/button》点击?button?按钮的时候，我们希望把界面上?msg?显示成?“HelloWorld“，于是我们在?button?上声明一个属性:?bindtap?，在JS文件里边声明了?clickMe?方法来响应这次点击操作：Page({?clickMe:function(){??this.setData({msg:“HelloWorld“})?}})响应用户的操作就是这么简单，更详细的事件可以参考文档?WXML-事件?。此外你还可以在JS中调用小程序提供的丰富的API，利用这些API可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的QuickStart例子中，在?pages/index/index.js?就调用了?wx.getUserInfo?获取微信用户的头像和昵称，最后通过?setData?把获取到的信息显示到界面上。更多API可以参考文档?小程序的API?。现在几乎每个应用都需要从后端获取数据，那么小程序如何获取呢，当然是通过网路操作了。我们封装了小程序的网络操作constapp=getApp()constrequest=(url,options)=》{?returnnewPromise((resolve,reject)=》{??wx.request({???url:`${app.globalData.host}${url}`,???method:options.method,???data:options.method===’GET’?options.data:JSON.stringify(options.data),???header:{????’Content-Type’:’application/json;charset=UTF-’????//’x-token’:’x-token’?//看自己是否需要???},???suess(request){????if(request.data.error_code===){?????resolve(request.data)????}else{?????reject(request.data)????}???},???fail(error){????reject(error.data)???}??})?})}constgets=(url,options={})=》{?returnrequest(url,{method:’GET’,data:options})}constpost=(url,options)=》{?returnrequest(url,{method:’POST’,data:options})}constput=(url,options)=》{?returnrequest(url,{method:’PUT’,data:options})}//不能声明DELETE（关键字constremove=(url,options)=》{?returnrequest(url,{method:’DELETE’,data:options})}module.exports={?gets,?post,?put,?remove}如何使用请看下图数据获取数据展现如下图数据展现到此，第三个问题我们就解决的了下面看第四个问题。小程序发布文档说明小程序发布步骤到此四个问题都解决了。总结：本文内容是很简单的，借用了大部分官方文档，其实本文目的不是教你学小程序开发，而是分享一下在学习一项新事物我的方法和思路，互联网技术变化是很快的，我觉得一个人的能力，不仅仅是你技术有多好，你要明白技术是用来干什么的，技术是用来解决现实生活中的问题的，一个好的程序员，不是技术能力，而是解决问题的能力，解决问题不可能只用一种技术，这就要求你的学习能力要强，针对不同的问题，使用不同的技术，哪怕使用的技术你不熟悉，但它是解决问题最好的方法，那就要求你有快速学习并解决问题的能力。学习一项新技术，我们要先抓住主线，把流程搞通了，以后再在工作中慢慢的熟悉和丰富对它细节的一些认知，所以学一项东西前多问自己几个问题，我学什么，我为什么学，我怎么学，等。先思考后学习，一定会让你事半功倍。对于怎么学习微信小程序开发，我问了自己上面的四个问题，每个问题，我只需要了解大体内容，四个问题都解决了，然后整个流程也就通了，以后也就是慢慢的对每个问题内容的细节慢慢的熟悉和了解了，其实花了不到一下午的时间，我就搞出了一个简单的demo出来了，了解的内容基本已经覆盖微信小程序日常开发%的内容了。以上就是我的一点学习心得。最后小程序DemoDemo截图首页我的点击我的任意条目，数据是从第三方聚合平台提供的api获取的最后目前有很多的多端开发框架，背景大多是都是因为小程序开发的盛行其他还有很多例如阿里的rax我们自己的ditto

　　⒐wxss和css的区别

　　⒑wxss是微信小程序项目中控制元素样式文件、css是通用的web网页控制页面样式文件

　　⒒微信小程序wxml有编程基础的工程师在接触到wxml之后才会发现，这种语言的编程理念和html页面的编程技术很相似当你稍微研究一下，就会知道开发一个微信小程序所需的技术含量并不高，只是一些标签的替换，比如换成了等。即使你对前端不是非常拿手，转战微信小程序的开发事业，也会是非常好的方向。二、微信小程序wxssWxss是微信的css。用自己的开发语言wxss替代了微信网页编程中使用的css，其实主要的实现思路和网页开发技术基本一致，也是一些标签的简单替换。大部分和原来的css基本一样，都是在同一个页面上调用实现的。但是可以说微信小程序比网页开发更简单方便，比如在两个文件中，只要index.wxml和index.wxss同时在同一个目录中，就可以直接在网页上写css

　　⒓微信小程序wxss样式总结

　　⒔mode属性：默认值：scaleToFill—-不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签aspectFit—-保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来aspectFill—–保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取top—-不缩放图片，只显示图片的顶部区域bottom—-不缩放图片，只显示图片的底部区域center—-不缩放图片，只显示图片的中间区域left—-不缩放图片,只显示图片的左边区域right—–不缩放图片，只显示图片的右边区域topleft—-不缩放图片,只显示图片的左上边区域topright—-不缩放图片,只显示图片的右上边区域bottomleft—-不缩放图片,只显示图片的左下边区域bottomright—-不缩放图片,只显示图片的右下边区域.隐藏NavigationBar.VM:Donothaveloginhandlerincurrentpage:pages/login/login.Pleasemakesurethatloginhandlerhasbeendefinedinpages/login/login,orpages/login/loginhasbeenaddedintoapp.json解决方案：.调整app.json中Pages里面的页面注册顺序；.检查wxml中bindtap是否在js里面将方法创建。.switch样式大小调整大家都知道微信官方提供的switch能改变color但是改变大小常用的widthheight不起作用但是可以这样修改.input不沾满屏幕右侧有留白使用flex布局的时候明明inputstyle设置了flex＝的属性可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡，不知道是不是一个bug，解决方案：在input外面包一层viewstyle设置flex＝用于沾满整个屏幕input用于显示文字————————————————.display取值.float(取值：left，right，none，inherit。).clear：该属性指出不允许有浮动对象的边。（取值：left，right，both，none..visibility：是否显示对象(取值：visible，hidden，collapse。).overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)其他属性：

　　⒕rpx是微信小程序WXSS的尺寸单位

　　⒖rpx是微信小程序WXSS的尺寸单位。介绍rpx前，先要介绍WXSS。

　　⒗WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。WXSS用来决定小程序页面WXML的组件应该怎么显示。

　　⒘为了适应广大的前端开发者，微信小程序的WXSS具有CSS大部分特性。同时为了更适合开发小程序，微信开发者对CSS进行了扩充以及修改。

　　⒙与CSS相比WXSS扩展的特性有：

　　⒚其中，rpx就是尺寸单位。

　　⒛建议：开发微信小程序时设计师可以用iPhone作为视觉稿的标准。注意：在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

　　参考资料：微信小程序开发文档