一章继续wxss 的讲解，

一是样式导入的使用方法。

二是 wxss 的选择器。

（一）样式导入

在wxss中，直接?持样式导?功能。

样式导入的方法：使? @import 语句可导?外联样式表，但只?持相对路径。

接下来，我们简单演示一下如何使用 @import 语句来进行样式导入。

1、在app.json中，新建页面 demo06

2、在项目中新建文件夹styles，并新建文件 common.wxss ，如下图。

3、在文件 common.wxss 中，写入view 样式，颜色是蓝色，字体是100px

如下图：

4、在demo06.wxss 文件中，删掉原先的代码，通过@import 语句来引入，并且路径只能写相对路径，代码如下，保存：

5、在demo06.wxml 文件中，将text 标签改为view 标签，保存，界面如下：

可以看到小程序页面的字体大小和颜色已经变化，样式导入成功！

是不是超简单~~~~

（二）wxss 选择器

wxss的选择器和css 的选择器基本一样，但是有一点需要注意：

wxss 的不支持通配符 * ！！！

以下代码是无效的！ ！！

上述这几行代码在我们进行样式初始化时经常使用，但是现在在小程序当中是不能使用的。

解决方法：将通配符* 修改为标签名，比如：view，text，等，以这个形式来实现初始化的功能

除此之外，所用的选择器的样例和功能解释与css 的是无差的，可参考下图：

文末福利：有童鞋可能不了解css选择器的相关知识，这里我找了一篇文章，有兴趣可看看：

作者：大前端世界

https://www.jianshu.com/p/aee8cf7d0183

章以后的四章都是介绍小程序样式文件——wxss 的使用，分为以下三个部分

一、尺寸方案

二、样式导入

三、选择器

这章先来讲wxss的尺寸单位—— rpx

wxss的定义：

WXSS( WeiXin Style Sheets )是?套样式语言，用于描述 WXML 的组件样式。

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

响应式?度单位 rpx 样式导?

rpx （responsive pixel）: 可以根据屏幕宽度进行自适应。

我们规定屏幕宽为 750rpx ，

如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素， 则 750rpx=375px=750 物理像素， 1rpx=0.5px=1 物理像素 。

小程序中，若需要做一个页面布局，实现页面的元素大小跟随屏幕改变而发生改变的话，

则需要用到rpx单位。

接下来，我们用代码来演示以上知识点。

第一步先来定一个需求：

如下图所示，此设计稿为 750px，里面包含200px × 200px 的页面，

并且所含文字的像素是40px

我们要将此设计稿和下图右侧的屏幕相匹配：

屏幕为375rpx，里面的页面是100 ×100 ，文字是20px

我们要做的就是将750rpx 的设计稿等比例变换为375rpx 的比例

这就是我们的需求了，接下来通过代码一步步实现了~~

1、打开app.json 文件，新建demo05 页面

2、打开demo05.wxml 文件，删掉原先代码，加入view 标签，代码如下

<view>
rpx
</view>

这里，要补充一点：

小程序中不需要手动引入样式文件，不需手动添加link 标签，

只需确保demo05 文件夹下的文件名称统一均为 demo05 即可，

小程序会自动匹配同名文件并引入。

3、打开demo05.wxss 文件，删掉原先代码，写入如下代码：

宽：200px；高：200px；字体大小：40px；背景颜色：蓝色。

view{
 width: 200px;
 height: 200px;
 font-size:40px;
 background-color: aqua;
}

保存后，界面如下所示：

可以看到，现在屏幕的宽度为375px，机型为iphone6

若我们先直接将屏幕 由375px 改为 750px , 蓝色方块的比例会随之变化吗？

修改后（若找不到750选项，可点击机型--自定义，手动添加屏幕数据），

对比前后的蓝色部分，可明显看到是一样的！

虽然屏幕比例扩大了很多，但是蓝色区域还是未随屏幕比例发生任何改变！

所以要实现这一需求，就需先将页面中某些元素的单位由 px 修改为rpx，或者修改百分比也行，

即换算单位！

比如：设计稿的像素为750， 则750px=750rpx, 也就是 1px=1rpx

4、 我们将demo05.wxss 中的px 修改为rpx,

由这样：

view{
 width: 200px;
 height: 200px;
 font-size:40px;
 background-color: aqua;
}

变为这样：

view{
 width: 200rpx;
 height: 200rpx;
 font-size:40rpx;
 background-color: aqua;
}

我们的需求中，是要实现375px 的屏幕， 所以，375px=750rpx，即1px=2rpx 根据这个比例，若将屏幕界面的机型改为 iphone6 (375px)，那蓝色区域的部分应该缩小一半！

5、将屏幕界面的机型改为 iphone6 (375px)，观察蓝色区域的大小变化

对比很容易发现，蓝色部分已经随屏幕的比例发生相应改变了！

这也就实现了我们的第一个需求！哈哈

上面的例子中，750px 和375px 是等比例关系，很容易换算

那如果现在的设计稿宽度是100px，长度未知，（用page表示），

用以上代码如何实现不同宽度的页面适配呢？

1、换算

page=750rpx

1px=750 rpx/page，将宽度 100px 代入后（两边都 ? 100）

100px=750rpx × 100/page

按照小学课本里的换算，

这里100px的赋值可以直接代入到代码中去

比如这里page=375，width的值还是100px,

view{
 width: 100rpx;
 height: 200rpx;
 font-size:40rpx;
 background-color: aqua;
}

将 100px=750rpx × 100/375 写入 width 中：

view{
  width: 750rpx× 100/375;
  height: 200rpx;
  font-size:40rpx;
  background-color: aqua;
}

但是，

这不是完全的数学运算，这里的这种直接赋值也是不正确的！！！

不能直接写成 width: 750rpx× 100/375 这种形式的！

切记！

它需要一个属性来做外衣—— calc 属性

2、在demo05.wxss 中，代码的 width 部分加入 calc 属性 ，其余不变，代码如下：

view{
 width: calc(750rpx*100/375);
 height: 200rpx;
 font-size:40rpx;
 background-color: aqua;
}

敲黑板：

在使用calc属性时，比如上述代码 width: calc(750rpx*100/375) 中， 750与rpx之间是不能有空格的！ 运算符* / 两边也是不能加空格！

保存后，界面如下:

3、改变屏幕比例，改为750px,观察蓝色部分的大小变化！

对比来看，蓝色部分明显已经发生变化！我们的需求完成了！

所以，最后总结：

要想实现不同宽度的页面适配，记住两点即可

100px=750rpx × 100/page

使用calc 属性 来书写

大家实操后感觉如何呢？

欢迎下方留言给我，

有疑问可以直接私信我哈~~~

发一个公益志愿者服务招募的小程序，你需要考虑前端、后端、数据库以及相关的第三方服务集成。以下是一个技术方案的概览：

图片来源pixabay

前端开发（小程序端）

技术栈

• 微信小程序：使用微信官方提供的小程序框架进行开发，包括WXML（类似HTML）、WXSS（类似CSS）和JS（JavaScript）。
• UI框架：可选Ant Design Mini Program、Vant Weapp等预设组件库，加快开发进度并保证一致性。

功能模块

• 首页：展示活动列表，搜索框，推荐活动等。
• 活动详情页：显示单个活动的全部信息，包括报名按钮。
• 我的页面：用户个人信息、已报名的活动、参与历史等。
• 消息中心：接收活动更新、报名确认等通知。

开发要点

• 使用微信开发者工具进行调试和预览。
• 遵循小程序规范，如页面生命周期、网络请求限制等。
• 利用云开发（CloudBase）或自建后端API接口。

后端开发

技术栈

• 语言/框架：Node.js + Express/Koa、Python + Flask/Django、Java + Spring Boot等。
• 数据库：MySQL、MongoDB、PostgreSQL等关系型或非关系型数据库。
• 身份验证：OAuth、JWT等机制。

功能模块

• 用户管理：注册、登录、权限控制。
• 活动管理：创建、编辑、删除活动。
• 报名管理：处理报名请求，发送确认信息。
• 通知系统：邮件、短信或推送通知。

开发要点

• 设计RESTful API或GraphQL接口。
• 实现数据持久化和事务管理。
• 安全性：防止SQL注入、XSS攻击等。

数据库设计

• 用户表：存储用户基本信息、认证信息。
• 活动表：包含活动详情、时间、地点、参与人数等。
• 报名表：记录用户对活动的报名状态。
• 消息表：存储系统发出的消息记录。

第三方服务集成

• 短信服务：阿里云、腾讯云等提供短信验证码和通知。
• 邮件服务：SendGrid、Mailgun等用于发送活动确认邮件。
• 支付服务：如果涉及活动收费，可以集成支付宝、微信支付等。

测试与部署

• 单元测试：编写测试用例，确保代码质量。
• 集成测试：测试前后端交互逻辑。
• 性能测试：模拟高并发场景，确保稳定性。
• 部署：选择云服务器（如阿里云、腾讯云），配置域名和SSL证书。

持续集成与持续部署（CI/CD）

• 使用Jenkins、GitLab CI/CD或GitHub Actions自动化构建、测试和部署过程。

法律合规与隐私保护

• 遵守GDPR、CCPA等数据保护法规。
• 明确用户数据使用政策，并获取用户同意。

通过以上技术方案，你可以构建一个功能全面、安全可靠、用户体验良好的公益志愿者服务招募小程序。在开发过程中，保持与团队成员的良好沟通，确保项目按时完成并达到预期目标。

深圳智根网络专注志原者平台系统开发，欢迎大家与深圳智根网络小编交流学习！