小程序基础
小程序开发基础
109905418
谨慎,优秀,力戒浮躁!
展开
-
微信小程序24__js 生成随机颜色
js 生成随机颜色原创 2023-08-01 12:20:36 · 201 阅读 · 0 评论 -
微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中
/宽度占屏幕的1/3。//垂直方向分散布局。第三种 水平垂直布局。第一种 水平居中。原创 2023-07-22 21:42:26 · 2579 阅读 · 0 评论 -
微信小程序开发22__在列表中 高亮选中某一项
在一个列表中,怎样实现高亮选中 某一项呢?我们先看要实现的效果图。原创 2023-07-08 21:51:25 · 228 阅读 · 0 评论 -
微信小程序开发21__Echarts的应用
它提供了常规的折线图、柱状图、散点图、饼图、K线图等, 还支持图与图之间的混搭。Echarts 是一个使用JS实现的开源可视化库, 其官网是。Echarts 的微信小程序版本的Github为。原创 2023-06-19 22:03:50 · 211 阅读 · 0 评论 -
微信小程序开发20__第三方UI组件 ColorUI 的应用
ColorUI 有鲜艳的高饱和色彩, 是专注视觉的微信小程序组件库。原创 2023-06-15 09:58:11 · 1903 阅读 · 0 评论 -
微信小程序开发19__第三方UI组件Vant Weapp的应用
为了提高小程序的开发效率, 可以考虑使用第三方 UI 组件来实现界面的视觉统一。本文以有赞第三方 UI 组件库为例,介绍如何使用自定义组件 实现一个小程序。Vant Weapp 是一款轻量、 可靠的小程序UI组件库, 与有赞移动端组件库 Vant 基于相同的视觉规范, 并提供一致的 API 接口, 方便开发者快速搭建小程序应用。原创 2023-05-07 21:05:20 · 666 阅读 · 1 评论 -
微信小程序18__一个启动动画
效果图如下:相关wxml代码:<view class="page"> <view class="loading"> <text style="color:greenyellow; font-size:20px;">loading</text> </view></view>wxss代码:.page{ margin:0; padding:0; background:white; /***原创 2021-12-17 23:57:22 · 1493 阅读 · 0 评论 -
微信小程序17__分享功能
相关代码有:在wxml文件 中,增加<button type="primary" bindtap="handleShare" style="margin-top:30px;"> 分 享 </button>在 js文件 中,增加, handleShare(e){ //分享按钮wx.showActionSheet({itemList: ['分享到朋友圈', '分享给朋友'],})},注意: 要想实现 分享到朋友圈, 分享给朋友的效果, 开发者...原创 2021-11-22 01:28:29 · 428 阅读 · 0 评论 -
微信小程序16__target 与 currentTarget 的区别
在小程序开发中, 经常要用到这两个,看一个图1. 通过一段代码来了解:这里catchtap 指捕获点击事件, 这段代码 捕获事件 与 触发事件都作用在 <view>元素上,要使用currentTarget 对象。2. 再看一段代码:这里, catchtap 捕获点击事件在<swiper>元素上, 传参的对象data-index 却在里面的子元素<image>上,要获取 每个<data-index>的值, 就要使...原创 2021-11-22 00:46:18 · 460 阅读 · 0 评论 -
微信小程序15__view 层叠展示
先看效果图:对应wxml布局:<view class="special-topic"> <image style="width: 100%; height: 350rpx" src="../../images/pic2.jpg"></image> <view class="special-topic-content"> <view class="special-topic-content-left"&原创 2021-07-17 00:41:08 · 2675 阅读 · 0 评论 -
微信小程序14__布局Flex-Direction,Flex-Wrap,Justify-Content
Flex 布局, 要深刻理解首先看一个图flex-direction 代表排列方向, 决定主轴的方向 在wxss文件中,如果这样定义flex-direction:row // 表示从左到右排列flex-direction:row-reverse // 表示从右到左排列flex-direction:column //表示从上到下排列flex-direction:column-reverse //表示从下到上排列 flex-wrap 代表是否换行, 默认值为nowrap...原创 2021-07-15 00:23:45 · 1916 阅读 · 0 评论 -
微信小程序13__wx:setStorage和wx:getStorage 数据存取
在小程序开发中,wx:setStorage(Object obj), 将数据存储在本地缓存中指定的key中。它会覆盖掉原来该key 对应的内容。数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理。 否则数据一直可用。 单个 key允许存储的最大数据长度为1MB, 所有数据存储上限为 10MB.参数 Object obj,见表属性 类型 默认值 必填 说明 key string 是 本地缓存中指定...原创 2021-07-07 23:34:48 · 4726 阅读 · 0 评论 -
微信小程序12__wx:for列表渲染
思考一个问题: 在wx:for 列表渲染, 如何改变默认的下标和变量名?可以 使用wx:for-item 指定数组当前元素的变量名 使用wx:for-index. 指定数组当前下标的变量名看一个示例,在forloop.wxml文件中,增加以下代码:<view wx:for="{{['a', 'b','c']}}">{{index}}:{{item}}</view><view style="border-bottom: 1...原创 2021-07-07 23:17:21 · 388 阅读 · 0 评论 -
微信小程序11_获取服务端数据,展示为网格
要动态展示数据,首先在页面文件 定义每个条目的布局, 这里以newList.wxml作为网格显示页<view class="cp_zuixin"><block wx:for="{{cp_zuixinList}}"> <navigator url='' class="cp_xiangmu"> <image src='{{item.img}}' class="cp_tupian" mode="widthFix"></image>原创 2021-07-07 00:56:24 · 390 阅读 · 0 评论 -
微信小程序10_<navigator> 标签的用法
<navigator> 标签 用于页面跳转,可以是tabBar之间的页面跳转,也可以是其他地方的页面跳转。在tabBar之间的页面跳转,必须在标签内 加上定义open-type="switchTab" , 才能生效。看一个例子在index.wxml中, <navigator class="navigator" url="/pages/newsList/newList" open-type="switchTab">跳转到另一个tab页面</naviga原创 2021-07-07 00:06:16 · 4392 阅读 · 0 评论 -
微信小程序8__一行2 列的布局,一行2列的图片布局
如果实现以下效果, 开发者需要怎么样做呢?在index.wxml中增加以下布局: <!-- 一行2列布局,左竖线右文字--><view class="text"> <view class="line-y"></view> <text>精品推荐</text></view> <!--一列2列 布局 精品推荐--> <view class="cps2"> <v原创 2021-07-05 00:36:45 · 7576 阅读 · 0 评论 -
微信小程序7__一行3 列的布局
要实现以下效果:在index.wxml中增加以下布局代码<!--以下为一行3列 布局, 显示最新通知布局: 左图标 中间文字 右侧图标--> <view class="wx-cells"> <view class="wx-cell"> <image src="/images/notice.png" class="wx-cell-icon"></image> <text .原创 2021-07-04 23:51:37 · 2089 阅读 · 0 评论 -
微信小程序6__swiper组件(滑块视图容器)
swiper滑块视图容器。其中只可放置swiper-item组件。参考https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html原创 2021-07-02 23:58:52 · 704 阅读 · 0 评论 -
微信小程序 5_底部tabBar的写法
在小程序项目中,在app.json文件里,"window" 节点之后,可以添加"tabBar" 节点, 写法如下所示实现效果如以下两个图所示完整示例代码见 mymall_20210702原创 2021-07-02 23:28:55 · 190 阅读 · 0 评论 -
微信小程序 3__事件,方法传参,数据绑定,微信API调用
一 事件<button bindtap="">点击我</button>原创 2021-03-11 23:00:37 · 721 阅读 · 0 评论 -
微信小程序 2__学习view, text,button,checkbox,radio,input,block标签
在微信小程序开发中, <view>标签 相当于html里的<div>标签, 每个<view>里面内容 自动占满一行, <text>标签相当于html里的<span>标签, 但是增加了selectable属性: 长按文本是否可选。 如下图所示...原创 2021-03-10 22:56:13 · 1284 阅读 · 0 评论 -
微信小程序 1__怎么样实现自定义组件
在微信小程序开发中, 要实现自定义组件, 通过4个步骤可实现1. 创建自定义组件, 以自定义checkbox为例第一步 在项目根目录 中创建components目录,在components中创建checkbox目录 , 在checkbox 目录下创建.js, json, .wxss, wxml 四个文件, 示意图如下 第二步, 这里先创建.js...原创 2018-11-03 22:56:36 · 227 阅读 · 0 评论