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

_小彭同学_

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

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/peng109/article/details/123454967

本文介绍了微信小程序开发中遇到的各种问题和解决方法，包括样式引入、注释、请求配置、路径完整化、布局理解、图片处理、数据渲染、事件处理、定位与布局等，并探讨了Promise、async/await、数据管理和接口调用等技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口文档地址：

轮播图--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的博客-优快云博客_coderwhy笔记

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

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

navigator

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

(66条消息) 关于微信小程序的navigator标签_笑到世界都狼狈的博客-优快云博客_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>

效果图：