草庐IT

微信小程序使用Echart实现折线图案例

 一、实现效果二、echart引入参考另一位博主博客微信小程序引入echarts图表(保姆式)_啊翔呀的博客-CSDN博客_微信小程序引入echarts总结来就是以下几步 1.首先,下载echarts微信版地址:GitHub-ecomfe/echarts-for-weixin:ApacheECharts的微信小程序版本2.把ec-canvas文件复制到项目中,由于我项目采用的是分包,故直接复制到需要使用到echart图表的包下。 3.在app.json文件中加入下代码"usingComponents":{"ec-canvas":"/ec-canvas/ec-canvas"},4.datacha

微信小程序入门与实战之rpx响应式单位与flex布局

新建页面的技巧与规则小程序包含一个描述整体程序的app和多个描述各自页面的page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:app.json必须有一个pages数组:一个小程序页面由四个文件组成,分别是:注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名新建pages文件夹,再新建index文件夹,点击新建page可以同时自动创建四个基本文件创建后编译器会自动在app,json目录的pages下配置好刚刚创建的界面(在json文件格式没有错误的清情况下才会自动配置):这时候我们编译运行项目,就能看见效果:image标签显示一张图片微信小程序使用i

【小程序开发之制作首页】

博客阅读顺序1.准备工作 链接:(41条消息)【小程序开发之微信登录】_隐隐池玉的博客-CSDN博客2.实现调用微信登录 链接:(41条消息)【小程序开发之微信登录】_隐隐池玉的博客-CSDN博客3.制作首页(本篇博客)系统框架图我完成的小程序包括以下模块和功能,之后将一一介绍,但是有些功能的代码逻辑有些乱,或者使用的方法比较笨。首页实现的效果个人档案查看报表按钮旁边的插图也是在阿里巴巴矢量图标库找的,轮播图是用美图秀秀的海报设计里面公众号首图的模板自己修改出来的,感觉更加清晰美观(也可以在百度上找轮播图广告的图片或者随便放几张长度较大的图片),食谱和文章的图片都是百度找的图片购物商城首页的实

微信小程序——WXSS模板样式,rpx,样式导入,全局样式和局部样式,全局配置-window

一.WXSS模板样式1.什么是wxssWXSS(WeiXinStyleSheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS。2.WXSS和CSS的关系WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发。与CSS相比,WxsS扩展的特性有:rpx尺寸单位@import样式导入二.rpx1.什么是rpx尺寸单位rpx(responsivepixel)是微信小程序独有的,用来解决屏适配的尺寸单位。2.rpx的实现原理rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上

微信小程序 js中写一个px单位转rpx单位的函数

大家写东西自然还是会比较喜欢用rpx但是事实证明在js中还是px好用因为很多单位交互的函数还是只返回px单位的理论上将750rpx是整个屏幕的宽度那么我们可以这样写一个函数pxToRpx(px){//获取整个屏幕的宽度单位pxletscreenWidth=wx.getSystemInfoSync().screenWidth//用整个屏幕的px单位除以750letratio=750/screenWidth//用px单位除以屏幕比return(px*ratio)}这里我们看看效果wxmlview>viewid="dom">view>view>wxss#dom{width:750rpx;height

【uni-app】响应式单位rpx

单位rpx是响应式pxrpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx正好是屏幕的宽度。屏幕变宽,rpx实际显示效果会等比放大,但在App端和h5端,屏幕宽度达到960px时,默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。uni-app在App端,H5端和小程序都支持rpx,并且可以配置不同屏幕宽度的计算方式。页面元素在uni-app的宽度计算公式如下:750*元素在设计稿中的宽度/设计稿基准宽度举例说明:若设计稿宽度为750px,元素A在设计稿上的宽度为100rpx,那么元素A在uni-app中的宽度应该设计为750*100/

【uni-app】响应式单位rpx

单位rpx是响应式pxrpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx正好是屏幕的宽度。屏幕变宽,rpx实际显示效果会等比放大,但在App端和h5端,屏幕宽度达到960px时,默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。uni-app在App端,H5端和小程序都支持rpx,并且可以配置不同屏幕宽度的计算方式。页面元素在uni-app的宽度计算公式如下:750*元素在设计稿中的宽度/设计稿基准宽度举例说明:若设计稿宽度为750px,元素A在设计稿上的宽度为100rpx,那么元素A在uni-app中的宽度应该设计为750*100/

WebStorm 支持微信小程序的 rpx 单位

webstorm在写微信小程序代码的时候,rpx单位会警告,并且格式化rpx单位与数值之间会有一个空格。解决方法:在plugins中搜索wechatminiprogramsupport,安装并下载这个插件,下载完成apply,然后ok;搜索WechatMiniProgram,将小程序支持启用一下,就可以啦~注意:如果1、2两步都完成之后,但是不生效,记得重启一下webstorm。

给女朋友的微信小程序之 情侣手账本(含源码)

目录一、背景二、思路三、效果图 四、代码1.xxxx.wxml 2.xxxx.js 3.xxxx.json4.xxxx.less5.app.js五、结语一、背景    给女朋友的微信小程序系列。        和女朋友的四周年纪念日要到了,往年的周年纪念日都是亲手画画,手绘纪念本,但是今年实在没那么多时间画画了,所以选择了用微信小程序做一个手绘本(虽然最后花的时间也不少)    初学前端不久,有的地方代码重复性高,多多见谅    扫描文末二维码,可以观看实际效果(在底部tab栏“更多”,点击“四周年”)二、思路    由于要做成和书本相似,我选择了外面做一个书本打开的动画,书本完全打开后,会放

给女朋友的微信小程序之 情侣手账本(含源码)

目录一、背景二、思路三、效果图 四、代码1.xxxx.wxml 2.xxxx.js 3.xxxx.json4.xxxx.less5.app.js五、结语一、背景    给女朋友的微信小程序系列。        和女朋友的四周年纪念日要到了,往年的周年纪念日都是亲手画画,手绘纪念本,但是今年实在没那么多时间画画了,所以选择了用微信小程序做一个手绘本(虽然最后花的时间也不少)    初学前端不久,有的地方代码重复性高,多多见谅    扫描文末二维码,可以观看实际效果(在底部tab栏“更多”,点击“四周年”)二、思路    由于要做成和书本相似,我选择了外面做一个书本打开的动画,书本完全打开后,会放