![](https://img-blog.csdnimg.cn/20200727143237162.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
微信小程序学习笔记
海轰Pro
微信小程序:「海轰Pro」
微信公众号:「海轰Pro」
知乎:「海轰Pro」
微博:「海轰Pro」
展开
-
【微信小程序】引入Base64 图标库
场景描述小程序icon图标需要使用base64编码后的icon,不使用png、jpg等格式的图片解决方法1.进入阿里图标库https://www.iconfont.cn/2. 创建一个项目项目管理 ------》 我的项目新建一个项目勾选彩色Base64再点击确认即可3.选择图标 并加入项目找到自己想要的图标点击购物车按钮加入购物车选完后再点击页面右上方的购物车按钮添加至项目4.下载代码进入“我的项目”找到刚刚新建的项目选择“Font clas原创 2022-04-13 16:54:20 · 3556 阅读 · 0 评论 -
【微信小程序|Debug】解决微信小程序真机预览无法访问PC端localhost:8080端口问题
文章目录前言问题描述解决办法步骤1步骤2步骤3步骤4结语前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过一些国奖、省奖…已保研。学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语! 小白阶段文章仅作为自己的学习笔记 用于知识体系建立以及复习知其然 知其所以然!问题描述场景:j原创 2022-03-01 19:40:58 · 5913 阅读 · 2 评论 -
【微信小程序|组件库】色卡生成器
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过一些国奖、省奖…已保研。目前正在学习C++/Linux/Python学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语! 机器学习小白阶段文章仅作为自己的学习笔记 用于知识体系建立以及复习知其然 知其所以然!效果展示Demo代码原创 2021-10-08 10:28:27 · 3073 阅读 · 0 评论 -
【微信小程序|组件库】一款清新且简洁的卡片样式
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过一些国奖、省奖…已保研。目前正在学习C++/Linux/Python学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语! 机器学习小白阶段文章仅作为自己的学习笔记 用于知识体系建立以及复习知其然 知其所以然!效果展示Demo代码原创 2021-10-07 12:18:06 · 5710 阅读 · 0 评论 -
【微信小程序|组件库】首页功能模块界面(2)
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!效果展示静态展示动态展示Demo代码jswxmlwxss结语文章仅作为学习笔记,记录从0到1的一个过程原创 2021-09-11 10:37:19 · 2362 阅读 · 2 评论 -
微信小程序前端页面Demo系列之仿塞尔达攻略助手首页
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!效果展示Demo代码jsPage({ /** * 页面的初始数据 */ data: { d原创 2021-08-30 14:48:20 · 8123 阅读 · 3 评论 -
【微信小程序|组件库】自定义swiper组件
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!效果展示组件设置步骤1在pages目录下,新建文件夹components步骤2在components下建立新文件夹sw原创 2021-08-22 15:26:13 · 4348 阅读 · 4 评论 -
【微信小程序|组件库】首页功能模块界面
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!效果展示Demo代码jswxmlwxss结语文章仅作为学习笔记,记录从0到1的一个过程希望对您有所帮助,如原创 2021-08-18 15:20:40 · 3046 阅读 · 4 评论 -
【微信小程序|Demo】订单结算页面
前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍 ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!效果展示Demo代码wxmlwxss结语文章仅作为学习笔记,记录从0到1的一个过程希望对您有所帮助,如有错误欢迎原创 2021-07-30 13:47:55 · 6061 阅读 · 2 评论 -
【微信小程序|组件库】简易用户登录页面(1)
<view class="login-box"> <view class="title"> <text>Login</text></view> <form> <view class="user-box"> <input type="text" name="" required="" placeholder="Username" /> </view> &l..原创 2021-05-05 13:19:40 · 2562 阅读 · 0 评论 -
微信小程序报错:expect end-tag `input`., near `div`
报错提示expect end-tag input., near div[ WXML 文件编译错误] ./pages/index/index.wxml expect end-tag `input`., near `div` 8 | <input type="text" name="" required=""> 9 | <label>Username</label>> 10 | &l原创 2021-05-04 15:23:11 · 5481 阅读 · 0 评论 -
【微信小程序|组件库】自定义加载动画(1)
前言 在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多。 通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代码,通过使用wx:if来控制该动画的显示。 &nb原创 2021-05-01 11:53:29 · 8745 阅读 · 11 评论 -
微信小程序--wxss中变量的使用
前言Hello!小伙伴!首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈 自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~场景模拟 - 1有时在某一个页面需要频繁地使用一原创 2021-04-16 20:15:28 · 10299 阅读 · 0 评论 -
微信小程序--自定义按钮样式(1)
前言Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~哈哈 自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~效果展示Demo代码WXML<vi原创 2021-03-27 23:56:51 · 6843 阅读 · 4 评论 -
微信小程序--setTimeout
setTimeout语法setTimeout(function callback, number delay, any rest)参数解释:function callback:回调函数number delay:延迟的时间,函数的调用会在该延迟之后发生,单位 ms。any rest:param1, param2, …, paramN 等附加参数,它们会作为参数传递给回调函数。返回值:number:定时器的编号,这个值可以传递给 clearTimeout 来取消该定时。作用设定一个定原创 2021-03-17 20:35:17 · 10440 阅读 · 0 评论 -
微信小程序--自定义slider组件
效果展示Demo代码index.wxml<text>slider组件自定义</text> {{value}}<view class="component-slider"> <!-- 覆盖slider组件盒子 --> <view class="slider-box"> <!-- 拖动按钮 --> <view class="slider-btn" style="margin-l转载 2021-03-17 19:53:42 · 5381 阅读 · 5 评论 -
微信小程序--行星轨迹
效果展示Demo代码index.wxml<view id="container"> <view id="sun"></view> <view class="orbit" id="earth-orbit"> <view class="globe" id="earth"> <view class="orbit" id="moon-orbit"> <view class="globe" id="moon"&原创 2021-03-09 18:40:11 · 3755 阅读 · 4 评论 -
微信小程序--七彩爱心加载动画
效果展示Demo代码index.wxml<view id="he"> <view class="box"> <view class="item"></view> <view class="item"></view> <view class="item"></view> <view class="item"></view> <view cl原创 2021-03-09 18:37:35 · 3527 阅读 · 2 评论 -
微信小程序--立体清新文字
效果展示Demo代码index.wxml <view class="word" style="--x: 6; --y: -6;"> <view style="--index: 0; --alpha-l: 0.125; --alpha-u: 0.25;">P</view><view style="--index: 1; --alpha-l: 0.125; --alpha-u: 0.25;">u</view><view style="原创 2021-03-01 11:14:08 · 2801 阅读 · 2 评论 -
微信小程序--环形文字加载动画
效果展示Demo代码index.wxml<view class="box"> <view class="preloader"> <view class="preloader__ring"> <view class="preloader__sector">L</view> <view class="preloader__sector">o</view> <view class="prelo原创 2021-03-01 11:09:08 · 2609 阅读 · 0 评论 -
微信小程序--wx.showModal
wx.showModal显示模态对话框参数属性类型默认值必填说明titlestring否提示的标题contentstring否提示的内容showCancelbooleantrue否是否显示取消按钮cancelTextstring‘取消’否取消按钮的文字,最多 4 个字符cancelColorstring#000000否取消按钮的文字颜色,必须是 16 进制格式的颜色字符串confirmTextstring原创 2021-02-06 17:58:43 · 25041 阅读 · 1 评论 -
微信小程序--简约加载动画合集
简约加载动画合集效果展示Demo代码index.wxml<view class="loader-container"> <view class="loader one"></view></view>index.wxsspage { background-color: #333; display: flex; justify-content: center; align-items: center; heigh原创 2021-02-06 15:31:16 · 2800 阅读 · 0 评论 -
微信小程序--螺旋线条
效果展示Demo代码index.wxml<view class="box"> <view class="loader"> <view class="line"></view> <view class="line"></view> <view class="line"></view> <view class="line"></view>原创 2021-02-02 21:03:23 · 2089 阅读 · 0 评论 -
微信小程序--彩色旋转风车
效果展示Demo代码index.wxml<view class="container"> <view class="box"> <view class="s"> <view class="a"></view> <view class="a"></view> <view class="a"></view&g原创 2021-02-01 21:40:20 · 2236 阅读 · 0 评论 -
微信小程序--加载动画:炫酷能量球
效果展示Demo代码index.wxml</view></view>indexindex.jsonindex.jsindex.wxss转载 2021-02-01 21:36:20 · 2601 阅读 · 0 评论 -
微信小程序--加载动画:方块波浪
效果展示Demo代码index.wxml<view class="wrapper"> <view class="box"></view> <view class="box"></view> <view class="box"></view> <view class="box"></view> <view class="box"></view> <vie原创 2021-01-30 14:30:43 · 2094 阅读 · 0 评论 -
微信小程序--萌系登陆界面
效果展示Demo代码index.wxml<view class="wrapper"> <view class="loginform"> <view id="owl-login"> <image class="head" src="../images/owl-login.png"></image> <view class="hand {{inputPassword ? 'hand-password'转载 2021-01-30 14:27:22 · 4759 阅读 · 5 评论 -
微信小程序--清新程序启动页
效果展示Demo代码index.wxml<!--start.wxml--><view class="container"> <view class="remind-box" wx:if="{{remind}}"> </view> <block wx:else> <image class="title" src="../images/hh4.png"></image> <view class="c转载 2021-01-28 15:22:27 · 2983 阅读 · 0 评论 -
微信小程序--转子加载动画
效果展示Demo代码index.wxml<view class="box"> <view class="loading"> <view class="title">HaihongPro</view> </view></view>index.json{ "usingComponents": {}}index.jsPage({ /** * 页面的初始数据 */ data: {原创 2021-01-28 15:18:22 · 2028 阅读 · 0 评论 -
微信小程序--加载动画:追光
效果展示Demo代码index.wxml<view class="ring"> Haihong <view class="a"></view></view>index.json{ "usingComponents": {}}index.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad:原创 2021-01-27 14:50:27 · 2375 阅读 · 0 评论 -
微信小程序--加载动画:收缩方块
效果展示Demo代码index.wxml <view class="loading"> <view class="a"></view> <view class="a"> </view> <view class="a"></view> <view class="a"> </view> </view>index.json{ "usingCompo原创 2021-01-27 14:44:23 · 2542 阅读 · 0 评论 -
微信小程序--点击水波涟漪效果
效果展示Demo代码index.wxml<view class="ripple" style="{{rippleStyle}}"></view><view class="container" bindtouchstart="containerTap"></view>index.wxss.container{ width:100%; height:100vh; background-color: orange;}.ripple {原创 2021-01-26 14:21:39 · 3030 阅读 · 0 评论 -
微信小程序--拟物态
效果展示Demo代码index.wxml<view class="box"> <view class="container"> <view class="card"> <view class="imgBx"> <view class="fab fa-js fa-6x"></view> </view> <view class="content"> <view c原创 2021-01-26 14:17:28 · 2272 阅读 · 0 评论 -
微信小程序--顶部状态栏切换
效果展示Demo代码index.wxml<view> <!-- tab栏 --> <view class='Tab'> <view class='tabImgL' bindtap='lefttab'> <image mode="widthFix" src='{{zuosrc}}'></image> </view> <scroll-view scroll-x="true" class="ta原创 2021-01-24 20:05:59 · 2782 阅读 · 1 评论 -
微信小程序--动态状态栏切换
效果展示Demo源码index.wxml<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected"> <block wx:for="{{tabs}}" wx:key="title"> <vie原创 2021-01-24 19:57:22 · 2460 阅读 · 0 评论 -
微信小程序--红色星球
效果展示Demo代码wxml<div class="circle"></div>wxsspage{ height: 100vh; display: flex; justify-content: center; align-items: center; background: #251f44;}.circle { width: 50px; height: 50px; border-radius: 100%; background:原创 2021-01-08 19:19:10 · 2339 阅读 · 2 评论 -
微信小程序--传送方块
效果展示Demo代码wxml<view class="contain"> <view class="container"> <view class="loader"> <view style="--i:1;--color:#FD79A8"></view> <view style="--i:2;--color:#0984E3"></view> <view style="--i:3;--co转载 2020-12-27 14:06:16 · 2108 阅读 · 0 评论 -
微信小程序--粘性小球
效果展示Demo代码wxml <view class="container"> <view class="big"> <view class="middle"></view> <view class="small"></view> </view> </view>wxsspage { margin : 0; padding: 0; background-co转载 2020-12-27 14:03:07 · 2166 阅读 · 0 评论 -
微信小程序--律动按钮
效果展示(CSS实现)Demo代码wxml <view class="start-box"> <button id="start" class="bg-grey">签到</button> </view>wxss.start-box { display: flex; align-items: center; justify-content: center; height: 100vh; animation: scaleDr原创 2020-12-26 14:24:39 · 2318 阅读 · 0 评论 -
微信小程序--功能区
效果展示Demo代码wxml<view class="box"> <view class="boxitem" wx:key='index' wx:for="{{functions}}" bindtap="tofunction" data-url="{{item.url}}"> <view class="boxitem_top"> <image src="{{item.icon}}"></image> </view>原创 2020-12-24 10:07:31 · 2239 阅读 · 0 评论