原生微信小程序开发-黑马优购(一)

本文介绍了微信小程序开发中遇到的各种问题和解决方法,包括样式引入、注释、请求配置、路径完整化、布局理解、图片处理、数据渲染、事件处理、定位与布局等,并探讨了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>

 效果图:

但是这里还

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值