小程序
小青年一枚
爱编程,爱设计,爱摄影,文艺与代码齐飞
展开
-
uniapp运行钉钉小程序
因项目原因,公司需要在钉钉里面开发小程序。之前用uniapp开发过app,H5,小程序。还真没尝试过钉钉小程序,今天就简单的记录下uniapp运行钉钉小程序中的过程。原创 2024-03-14 18:22:37 · 1011 阅读 · 0 评论 -
uniapp页面跳转到原生ios页面
项目背景是前端用uniapp开发页面,然后嵌套到原生ios及安卓里面,在开发的时候就想到了怎么去通讯,在uniapp官网上找到uni小程序SDK,找到了与原生交互通信的方法。这样原生开发的同事就能接收到uniapp传递的事件了,然后原生开发的同事根据业务情况去写相应的代码。今天来公司加班,忙完手里的活,先把这段时间遇到的问题难点梳理总结下。好记性不如烂笔头嘛。在项目中也可以直接使用,前提是我们要和原生开发的同事提前约定好传递的方法名称。前端在开发完成后,在编辑器里面找到发行,然后打包成wgt格式的包。原创 2022-10-29 14:51:04 · 3308 阅读 · 3 评论 -
微信小程序状态栏
之前刚开始接触小程序的时候有写过小程序状态栏,今天开发的时候又遇到了,顺便记录下。<view style="padding-top: {{statusBarHeight}}px;background-color: #f6f6f6;"></view>Page({ data: { statusBarHeight: 0, //状态栏初始高度 toBarHeight: 44, //标题栏高度 }, onLoad(options){ // 手机状态栏的原创 2022-05-17 09:30:00 · 645 阅读 · 1 评论 -
微信小程序wx.setClipboardData复制文本
今天在开发中遇到一个问题,在小程序中 复制文本,在做之前也查了资料,大部分都是固定文本复制,(小程序本身是不能手动复制的)和需求还是不一样的。对于复制官方文档中提供了:wx.setClipboardData设置系统剪贴板的内容。调用成功后,会弹出 toast 提示"内容已复制",持续 1.5s。方法一:要求在小程序页面中可以手动选择文本复制。<text selectable="true">{{texts}}</text>在text标签中添加selecta.原创 2022-05-16 23:45:04 · 8655 阅读 · 0 评论 -
小程序editor富文本编辑使用及rich-text解析富文本
今天尝试了下在小程序中使用editor富文本编辑,然后再详情页使用rich-text来解析富文本html。首先先下载editor组件,并放到项目目录中,(组件下载地址)文件存放后,打开richText.wxml可以根据需求修改代码,richText.js同理。然后在需要的json文件中引入"usingComponents": { "richText":"../../components/richText/richText"},在需要的wxml中使用组件<ric原创 2022-03-29 17:24:39 · 5482 阅读 · 1 评论 -
微信小程序获取年月日周及早上、中午、晚上
今天简单的记录下在开发小程序时,页面中获取当前年月日周及早上、中午、晚上时间段原创 2022-03-24 15:35:53 · 3532 阅读 · 0 评论 -
小程序云开发 上传图片到云存储
在学习了小程序云开发后,遇到了开发中常见的图片上传,今天简单的记录总结下在云开发中如何实现图片上传到云存储中。原创 2022-02-16 15:24:24 · 9600 阅读 · 6 评论 -
小程序云开发表单提交并在页面中获取数据
当遇到表单录入时,录入好的数据提交保存到云数据库后,在其他页面展示刚提交到数据库的数据时,今天自己尝试做一遍。表单页面:代码如下:<view class="container"> <form action="" bindsubmit="addBtn"> <view class="view-li"> <label>姓名:</label> <input type="text" name="na原创 2022-02-13 20:00:00 · 2364 阅读 · 2 评论 -
微信小程序云开发使用方法-1
2022年已经过了几天了,之前做过微信小程序,但是没使用过小程序提供的云开发功能,今天学习了云开发数据库的使用,做个笔记记录下。在小程序创建项目的时候,勾选云开发,等项目创建好后,项目目录中会出现如下图所示的文件夹,这就代表项目已经开通了云开发,文件夹中有自动带的文件夹,可以删掉。云开发在小程序编辑器中点击此处,就可以打开云开发控制台了。打开控制面板后,我们看下数据库红色框中是创建一个数据集合,创建好后在点击添加记录,每添加一个就是一个数据记录等我们创建好数据后,在相应的js文件中引用数据原创 2022-01-11 10:46:14 · 2966 阅读 · 0 评论 -
uni-app 页面封装组件并引用到页面
相信大家在开发的时候都会把项目中模块相似的都会单独做个组件,比如头部搜索、列表。。。等,然后可以随意的在需要的页面中引入。这样不仅简化代码,更方便维护。今天我们看下在uni-app中如何简单的创建组件并引用到页面中。上篇文章中讲到了目录中各个文件的用途,components这个文件夹就是存放公共组件的地方。我们可以在这里面自行创建文件,接下来我们就拿列表来说下,先看下效果图:在components文件中创建list文件,创建list.vue文件后,然后根据需求进行编写布局。我们来看下代码,(样式我原创 2020-12-07 18:17:58 · 10111 阅读 · 2 评论 -
微信小程序 使用Echarts实现省市地图(山东地图demo)
上篇写过 在PC端使用Echarts实现省市地图效果,今天说下在小程序中如何使用echarts实现省市地图,这次就拿山东地图来说下。1、首先还是下载Echarts在git上提供的组件,下载到本地放到项目中。如下图:2、组件放入到项目中,在相应的json中引入组件:{ "navigationBarTitleText": "地图", "usingComponents": { "ec-canvas" : "../../ec-canvas/ec-canvas" }}3、在wxll页原创 2020-07-01 17:17:12 · 2976 阅读 · 7 评论 -
微信小程序中使用Echarts 折线图、柱形图、饼状图
在做小程序时需要用到图表,今天就研究了下Echarts在小程序中怎么使用。在官方文档上看了下如何使用及基本配置方法,包括如何在json、js中引入,具体配置和引入方法可以多看下Echart官方文档。(官方文档地址:https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts)这个是Echart官方在原创 2020-06-22 16:56:43 · 4960 阅读 · 2 评论 -
微信小程序页面返回顶部效果
给大家分享一个微信小程序页面返回顶部的效果,具体内容如下:1、wxml代码<scroll-view scroll-y scroll-with-animation='true' scroll-top='{{ topNum }}'> <view>1</view> <view>1</view> <view>1</view> <view>1</view> <view>1&l原创 2020-06-17 14:07:54 · 405 阅读 · 0 评论 -
微信小程序 上传多张图片及删除、预览
今天做项目,正好遇到在小程序中需要实现从本地文件中一次选择上传多张图片,同时要支持删除和预览效果。先看下效果图:1、上传按钮代码:<!-- 添加图片按钮 --> <view class="question-images-tool"> <button type="warn" bindtap="chooseImage" wx:if="{{images.length < 9}}">添加图片</button> </vie原创 2020-06-17 11:35:20 · 1293 阅读 · 1 评论 -
小程序跳转页面,点击不同模块,打开不同页面
老规矩,先看效果图,想要点击这四个图片分别进入不同的页面。这就使用到小程序url,先看下代码:<view class="adsenseBox"> <navigator class="adsense" url="{{item.urlLink}}" wx:for="{{adsenseList}}" data-id="{{item.id}}" catchtap="adsense" wx:key> <image src="{{item.ur原创 2020-05-27 18:07:43 · 1634 阅读 · 1 评论 -
微信小程序 分类页面 电商常用布局demo
在项目中经常遇到分类的页面,今天有时间就自己单独做了一个分类的页面。wxml代码:<!--左侧栏--><view class="nav_left"> <block wx:for="{{cateItems}}"> <view class="nav_left_items {{curNav == item.cate_id ? 'active' :...原创 2020-04-06 17:28:51 · 2310 阅读 · 0 评论 -
微信小程序引用iconfont图标字体库
IconFont(图标字体)是用字体来代替图标、图片文件的方法,通过IconFont可以对图标的大小、颜色等进行控制。微信小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,需将图标字体文件转换为base64后引用。可以从阿里巴巴图标库(http://www.iconfont.cn/)选择项目所需要的IconFont,并下载至本地。解压后把样式文...原创 2020-03-18 18:40:05 · 350 阅读 · 0 评论 -
微信小程序 swiper图片轮播切换效果 demo
今天写下关于小程序里面如何写swiper图片自动切换效果。废话不多说,先看代码。<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper-show"> <block wx:for="{{swiperImg}}"> ...原创 2020-04-07 10:20:40 · 915 阅读 · 0 评论 -
微信小程序 自定义公共导航栏
微信小程序自定义头部导航栏需要在app.js文件中添加 “navigationStyle”: "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "naviga...原创 2019-12-06 17:55:18 · 743 阅读 · 0 评论 -
微信小程序 scroll-view 左右滚动效果
<!-- scroll-view 列表 --> <view class="scrolls"> <!-- 模块标题 --> <view class="titleBlock"> <text class="iconfont icon-rexiao"></text>{{titl...原创 2020-04-18 14:42:52 · 879 阅读 · 2 评论 -
微信小程序 图片预览、放大效果
废话不说,先上代码:<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> ...原创 2020-04-18 11:32:36 · 237 阅读 · 0 评论