微信小程序开发第一天

朴灿烈づ我的快乐病毒、 2022-05-22 06:28 177阅读 0赞

1. 如果是我们自己编辑页面的话，先是在.wxml里面编辑，之后出现报错，那是因为在app.json为空，应该在其里面编辑代码：

"pages":\[

"pages/welcome/welcome"

注意这里是\{\}大括号，而不是小括号。

2. 在wxml中编写小程序的骨架。

3. 物理像素/2=逻辑像素，即：2rpx=1px;在微信小程序中很少直接使用px。因为在机器中并不是所有分辨率都是一样的。

4. 可以再wxml中写样式，也可以在wxss（一般正式在这个里面书写）中书写。

5. 在class和style里面都可以编写样式，但是究竟他们两个有没有区别呢？当然有：

静态属性：用class

动态属性：用Style

6. 如果在wxss样式中有通用的样式，比如说字体样式和颜色都一样，那么就可以放在app.wxss中。（全局）

7. 在调试的时候出现：“pages/welcome/welcome 出现脚本错误或者未正确调用Page()”----原因以及解决办法为：可能在welcome.js里面编辑的为空，我们要想解决这个问题，应该在welcome.js里面编辑：Page（\{\}）方法。

8. 当要想把共同的样式，比如说是6中所说。则应该在app.wxss中设置：text\{

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

\}而不是<text></text>。

9.要想设置背景颜色，如果单单在container里面设置是不行的，颜色没有铺满。即使设置了100%。那我们如果提前知道了显示器的屏幕大小，比如说苹果6，那我们可以在container里面背景颜色、并且设置为    height: 1334rpx;

但是，假设我们要设置的背景大小不知道或者说是变化的，那么这种方法就是行不通的。下面我们再在container外面嵌套page。如下：

page\{

height:100%;

background-color: \#b3d4db;

10.1个pt可以有1个或者多个px组成，注意：在苹果6中，一个pt是由2个px组成的。苹果6中1px=1rpx=0.5pt。

11. 之前出现的图片和“哈喽，七月”在一行上，然后也不对齐的现象，原因就是老师剪切视频的时候出错了。但是我根据自己的经验也能解决这个问题，但是不知道代码到底对不对，先记住：

.container\{

display: flex;

flex-direction:column;

align-items:center;

height: 1334rpx;

.user-avatar\{

width: 100rpx;

height: 100rpx;

margin-top: 300rpx;

margin-left: 300rpx;

border-radius: 40%;

.user-name\{

display: flex;

margin-top: 100rpx;

margin-left: 280rpx;

font-size:32rpx;

font-weight: bold;

text-align: center;

.moto-container\{

display: flex;

margin-top:100rpx;

margin-left: 200rpx;

border: 1rpx solid \#405f80;

width:300rpx;

height:90rpx;

border-radius: 5px;

text-align: center;

.moto\{

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: 23rpx;

font-weight: bold;

line-height: 80rpx;

color: \#405f80;

page\{

height:100%;

background-color: \#b3d4db;

其实，修改过来也很简单。在welcome.wxml中View设置

<view class="container">

原来的代码如下：

.container\{

display: flex;

flex-direction:column;

align-items:center;

.user-avatar\{

width: 100rpx;

height: 100rpx;

margin-top: 300rpx;

border-radius: 40%;

.user-name\{

margin-top: 100rpx;

font-size:32rpx;

font-weight: bold;

text-align: center;

.moto-container\{

display: flex;

margin-top:100rpx;

border: 1rpx solid \#405f80;

width:202rpx;

height:90rpx;

border-radius: 5px;

text-align: center;

.moto\{

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

font-size: 23rpx;

font-weight: bold;

line-height: 80rpx;

color: \#405f80;

page\{

height:100%;

background-color: \#b3d4db;

微信小程序开发第一天

发表评论取消回复

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

相关阅读

相关【微信小程序】小程序功能开发

相关第一个微信小程序

相关微信小程序第7天

相关微信小程序第6天

相关微信小程序开发

相关微信小程序开发第一天

相关微信小程序开发——第一个小程序

相关微信小程序开发笔记（二）第一个微信小程序

相关微信小程序-开发第一周

相关微信小程序开发