原生微信小程序开发-黑马优购（一）

_小彭同学_

已于 2022-03-21 23:01:10 修改

阅读量3k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-03-14 17:32:07 首次发布

本文链接：https://blog.csdn.net/peng109/article/details/123454967

版权

接口文档地址：

轮播图--ShowDoc

视频地址：

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili

后面也许可以通过快速搭建mock来获取数据（这个工作肯定要会）

如果真的要用起来，肯定还是要搭建起自己的后台。

通过样式方式引入字体图标

参考：iconfont-阿里巴巴矢量图标库

微信小程序中不支持通配符“ * ”

页面初始化

主体颜色定义成变量

微信小程序单行注释没有用

单行注释没有用（//）

要用多行注释（/* */）

写less文件，变成wxss文件？

要在vscode 中下载一个插件，然后就可以了写less文件了。

发送请求，要么记得把勾去掉，要么去开启请求合法域名

引入的路径要写全，包括后缀名

这个东西不是绝对的，但是有的时候可能会出错

flex布局中，flex：1是什么意思

Flex 布局语法教程 | 菜鸟教程 (runoob.com)

如果a的flex=1，而b=2，则b的宽度应该是a的两倍。

除了这个，父元素经常设置这些属性，来实现各种效果。

display：flex；
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;

html中img默认的宽高

img好像没有默认的宽高，这里只说了不给图片设置宽高容易出错。

HTML <img> 标签的 height 和 width 属性 (w3school.com.cn)

伪类选择器

包括选定指定的第几个元素或者某几个元素

如果要用的时候，可以查查有没有对应的伪类选择器。

CSS 伪类 | 菜鸟教程 (runoob.com)

vw

Promise

这部分其实之前看过，不过忘了里面几个默认的参数是什么意思

(66条消息) 超详细!Vue-coderwhy个人学习笔记(五)（Day8-Day9）_coderYYY的博客-CSDN博客_coderwhy笔记

就是如果函数执行成功，则执行resolve函数，括号里面的“hello world” 是参数，然后传到 .then中执行，参数data的值就是 “hello world”

同理，如果执行失败，就执行 reject函数。

navigator

这个元素是默认是块元素，可以设置宽高。

(66条消息) 关于微信小程序的navigator标签_笑到世界都狼狈的博客-CSDN博客_navigator标签

swiper组件的默认样式

默认宽度 100% ⾼度 150px

里面的swiper-item的默认样式是

默认宽度和⾼度都是100%

楼层部分图片样式设计有点意思

主要是用到了浮动。

像这样的

用浮动可以直接搞定了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="a"></div>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="b4"></div>
</body>
</html>

<style>
    .a{
        width: 33.33%;
        height: 200px;
        background-color: red;
        float: left;
    }
    .b1,.b2,.b3,.b4{
        width: 33.33%;
        height: 100px;
        border: 5px solid black;
        float: left;
        box-sizing: border-box;
    }
</style>

效果图：

最低0.47元/天解锁文章

_小彭同学_

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
原生微信小程序开发-黑马优购（一）

接口文档地址：轮播图--ShowDoc视频地址：黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibilivs快捷键 wx-app wx-page通过样式方式引入字体图标微信小程序中不支持通配符“ * ”页面初始化主体颜色定义成变量微信小程序单行注释没有用单行注释没有用（//）要用多行注释（/* */）写less文件，变成wxss文件？发送请求，要么记得把勾去掉，要么去开启请求合法域名引入的路径要写...
复制链接

扫一扫