微信小程序

已于 2024-03-12 00:54:44 修改
阅读量891 收藏 6
点赞数 22
文章标签： 大数据
于 2024-03-12 00:51:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmyhyx/article/details/136639250
版权

​ 1.1：创建项⽬
在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。
然后在右侧点击 [+] 开始新建项⽬。

1.2商品列表组件轮播图代码 

分类页面

<view>

  <view class="category-container">

    <!-- 左侧的滚动视图区域 -->

    <scroll-view class="category-left-view" scroll-y>

      <!-- 一级分类 -->

      <view class="left-view-item active">爱礼精选</view>

      <view class="left-view-item">鲜花玫瑰</view>

      <view class="left-view-item">永生玫瑰</view>

      <view class="left-view-item">玫瑰珠宝</view>

    </scroll-view>

    <!-- 右侧的滚动视图区域 -->

    <scroll-view class="category-right-view" scroll-y>

      <!-- 二级分类 -->

      <view class="test">

        <view wx:for="{{10}}" wx:key="index" class="right-view-item">

          <navigator 

            class="navigator"

            url="/pages/goods/list/list?category2Id=1"

          >

            <image class="" src="../../assets/images/cate-1.png" mode=""/>

            <text class="goods_item_name">真情告白</text>

          </navigator>

        </view>

      </view>

    </scroll-view>

  </view>

</view>
 

flex布局
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .demoOne{
            width: 800px;

            height: 800px;

            border: 2px solid blue;

            /* 设置弹性盒子布局，将块级元素转化为行内元素。 */

            display: flex;

            /* flex-direction属性

               flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。 */

            /* row:默认值，主轴为从左到右的水平方向。

               row-reverse:主轴为从右到左的水平方向。

               column:主轴为从上到下的垂直方向。

               column-reverse:主轴为从下到上的垂直方向。 */

            /* flex-direction: row; */

            /* flex-direction: row-reverse; */

            /* flex-direction::column; */

            /* flex-direction: column-reverse; */

            /* justify-content属性

               justify-content属性用于设置项目在主轴方向上的对齐方式。能够分配项目之间及其周围多余的空间。 */

            /* flex-start:默认值，表示项目对齐到主轴起点，项目间不留空隙。

               flex-end:项目对齐到主轴终点，项目间不留空隙。

               center:项目在主轴上居中排列，项目间不留空隙。

               主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。

               space-between:两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等space-around:每个项目之间的距离相等，

               第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。 */

            /* justify-content: flex-start; */

            /* justify-content: flex-end; */

            /* justify-content: center; */

            /* justify-content: space-between; */

            /* justify-content:space-around; */

            /* align-items属性align-items属性用于设置项目在交叉轴上的对齐方式。*/

            /* center:项目在交叉轴的中间位置对齐。

               flex-start:项目顶部与交叉轴起点对齐,flex-end:项目底部与交叉轴终点对齐。

               baseline:项目的第一行文字的基线对齐。 */

            /* align-items: center; */

            /* align-items: flex-start; */

            /* align-items: flex-end; */

            /* align-items: baseline; */

            /* 若要设置元素水平垂直居中

            display: flex;

            justify-content: center;

            align-items: center;

            */

        }

        .boxOne{
            width: 100px;

            height: 100px;

            background-color: green;

        }

        .boxTwo{
            width: 200px;

            height: 200px;

            background-color: red;

        }

        .boxThree{
            width: 300px;

            height: 300px;

            background-color: yellow;

        }

    </style>

</head>

<body>

    <!-- 块级元素会独占一行 默认的宽度占满父级元素，行内元素不会换行。 -->

    <div class="demoOne">

        <div class="boxOne">1</div>

        <div class="boxTwo">2</div>

        <div class="boxThree">3</div>

    </div>

</body>

</html>

lmyhyx
关注
如何在微信小程序中对接微信支付
weixin_44976692的博客
07-10 2万+
在微信小程序中集成微信支付，需要经过一系列步骤，包括注册小程序、申请微信支付、创建支付订单、调用支付API以及处理支付结果通知。尽管过程中可能会遇到一些问题，但只要按照文档要求进行配置和开发，基本都能顺利完成。希望本文能为你提供一些帮助，让你在微信小程序中顺利集成微信支付。
10分钟入门 - 微信小程序开发
热门推荐
程序员「阿基米东」的编程之旅
01-09 25万+
注册微信小程序 如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。 接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。 激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提...
微信小程序源码1000套
李勇康的博客
02-19 7万+
简介 不懂开发，但又想拥有自己的小程序怎么办？或者想要基于某个小程序框架做二次开发？如下截图，免费提供500套微信小程序源码包合集。 类目涵盖：音乐类、交通类、天气类、游戏类、答题类、博客类、商城、教育、旅游类等等，拿走不谢。 微信小程序源码包-合集1 微信小程序源码包-合集2 微信小程序源码包-合集3 微信小程序源码包-合集4 微信小程序源码包-合集5 微信小程序源码包-合集6 微信小程序源码包-合集7 部分小程序上线效果如下： .
微信小程序源码精选250套
寻找09之夏的博客
06-11 4万+
250套小程序源码免费送
【微信小程序】小程序代码基本组成结构
hacker707的博客
09-19 3万+
微信小程序之小程序代码基本组成结构，持续更新微信小程序系列专栏
微信小程序注册流程及APPID获取（完整版图文教程）
Captinyoo的博客
03-03 4万+
本文将图文介绍微信小程序注册、完善小程序账号信息、添加项目成员和体验成员和获取小程序ID（AppID）及小程序密钥（AppSecret）的详细流程，旨在提供简明的入门指导和实践建议。微信小程序提供了一个简单而直接的方式，让开发者能够快速开始他们的小程序开发旅程。开发者需要访问微信公众平台的官方网站，并选择“小程序”作为注册类型。这个过程中，你会被要求提供一些基本信息，包括但不限于你的个人或企业信息。值得注意的是，根据你的开发目的选择正确的账号类型非常重要，因为它会影响到你可以使用的微信小程序功能和权限。
微信小程序发布流程
IT从业者
03-12 3万+
1.授权 登录微信公众平台微信公众平台，给相应人员授权；最好同时添加体验成员（用于验证测试）。 2.开发工具及代码 下载官方的微信开发者工具，使用微信扫一扫登录；同时下载最新的项目代码，导入的开发工具中。 3.编译及上传 在发布之前可通过点击编译、预览、真机调试等，在本地进行测试。 代码测试没问题后，点击上传。 上传完成后，找到微信公众平台的版本管理。 ...
微信小程序 实现支付流程
weixin_71403100的博客
01-30 1万+
1、获取OpenID：通过wx.login()获得code，将code传给接口获得OpenID调用预支付接口，将OpenID与接口需要携带的其他参数，得到预支付核心数据；数据包含：【时间戳--timeStamp，随机字符串--nonceStr，预支付id--package，签名算法--signType，签名--paySign】调用wx.requestPayment()，传递上一步获取的5个预支付核心数据，得到支付结果最后，👏👏 😀😀😀 👍👍。
微信小程序部署
python_web全栈
03-11 9313
1. 配置服务器域名 小程序要求程序中使用到所有外部链接(HTTPS)必须将域名提前配置到微信平台。 2. 小程序api路径替换 3. 上传小程序代码 如果想让小程序被所有人在微信中使用，需要将小程序代码进行上传&审核， 审核通过之后才能在微信中找到该小程序。 4.需要对小程序进行描述和配置: 5. 提交审核（1-2天)︰ ...
如何注册微信小程序
m0_61799631的博客
07-15 1万+
从免费注册开始一步一步教你如何创建属于自己的微信小程序·
【微信小程序-毕设期末大作业】源码电商类微信小程序
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
【微信小程序-毕设期末大作业】微信小程序源码小熊的日记.zip
05-06
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
微信小程序商城系统源码
04-25
微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)...
数据治理项目怎么做，3种推进思路可参考
esensoft123的博客
11-06 549
因此，即使有些人认为先建大数据平台而暂时无法实现业务支撑或应用分析是无效的，但实际上，在建设平台的过程中，企业的能力已经在逐步提升。因此，在做项目时，我们必须与最终用户达成一致，明确项目的定义和规划。先做数据治理顶层设计的规划，确定战略目标，进而拆解KPI，然后设立对应的支撑项目，并且根据优先级别进行排序，最后形成一个执行的路径，即每个阶段要建设的项目及其目标。这种方式的优点显而易见：它确保了项目有明确的规划和方向，从面到线，再到点，逐步落实，从而最大程度地保证了项目的成功，减少了无用功和重复建设。
【零基础小白】 window环境下安装RabbitMQ
最新发布
许苑向上
11-06 244
RabbitMQ是用编写的，因此在安装RabbitMQ之前，需要先安装Erlang环境。确定Erlang版本：根据具体需求以及安装符合的Erlang版本。本文下载的故而下载Erlang版本之间的，打开系统属性：右键点击“此电脑”或“计算机”图标，选择“属性”，然后点击“高级系统设置”。编辑环境变量：在“系统属性”窗口中，点击“环境变量”按钮。编辑Path变量：同样在“系统变量”区域，找到名为Path的变量并选择它，然后点击“编辑”按钮。
牛客网项目总结
qq_43539664的博客
11-04 284
下面这幅图是牛客网项目的架构图，最下层是Spring Boot，表示我们所有的技术都是基于Spring Boot，上面一层是Spring，Spring上面是Spring MVC、Spring MyBatis 和 Spring Security。数据库访问的问题，通过Spring Security来管理我们项目中的安全层面的这个内容来管理我们项目中的权限，这三个技术都是基于Spring之上的。由Spring进行整合。通过Spring MVC 解决前后端请求交互的问题，通过Spring MyBatis解决。
Kafka-linux环境部署
xiaoyuanbama的博客
11-05 198
Kafka在Linux环境下的安装，以及一点点的kafka实战运维优化经验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值