设计微信小程序是按照什么尺寸做

设计微信小程序是按照什么尺寸做,第1张

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在

iPhone6

上,屏幕宽度为375px,共有750个物理像素,则750rpx

=

375px

=

750物理像素,1rpx

=

05px

=

1物理像素。

设备

rpx换算px

(屏幕宽度/750)

px换算rpx

(750/屏幕宽度)

iPhone5

1rpx

=

042px

1px

=

234rpx

iPhone6

1rpx

=

05px

1px

=

2rpx

iPhone6s

1rpx

=

0552px

1px

=

181rpx

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem:

规定屏幕宽度为20rem;1rem

=

(750/20)rpx

注:开发微信小程序时设计师可以用

iPhone6

作为视觉稿的标准。

建议:设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出来的尺寸是多少px就是多少rpx,至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算

与iOS开发很相似,小程序的导航栏也可以全局设置一下,在公共文件appjson中设置了导航栏相关样式如下:

这个地方是全局设置,如果想要在不同的页面设置各自的标题属性,只需要在该子级文件中设置

子页面想调用共公js的方法,需先在子页面js中先实例化app:具体过程如下

在需要调用的子页面中,

如果是嵌套循环,很容易出现多个list和index,例如表视图一样,所以在小程序中可以重命名 list 和index 方法为:wx:for-index='重命名' wx:for-list="重命名"

在APP开发中,UI复用是一个很好的手段,在小程序上就是模板template。

在逛小程序联盟的时候发现了一个大湿总结的比我好,搬过来一下。

微信小程序中,如果几个页面中需要引用同一个header/footer,当定义了公共模板时,有两种引用方法如下:

方法一:在公共模板中定义template元素,利用 方法 ,这种方式只会显示公共模板的template里面的内容,之外的内容不会显示

方法二:

总结:import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容,显而易见,include方式更简单一些,在wxml中只需要一句话即可。

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 05px。

具体的 这里有一片文章介绍的很详细 , 还有这个

小程序的事件主要有:

小程序中的wxml中绑定事件有两种:以touchtab为例 ,在wxml中必须有bind/catch不然无法实现上述事件

bindtouchtab和catchtouchtab bind的不会阻止事件冒泡(元素最里层到最外层函数执行),catch会阻止冒泡,只是冒泡到当前层结束

如果想在元素执行某事件时把元素的某个属性传到后台 可在元素中加入data-属性名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置,查看滑动位置也可以通过touchstart和和touchend的clientx/y获取

看到几个别人写的,瞬间石化,果断收藏。

在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要两步骤:

1:在utils被调用的js文件中,面向对象的方式模型输出: moduleexports={要调用的函数名称:要调用的函数名称 };

2:在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址"); 可以输出一下object就能看到被调用的方法了;

例子如下:

要调用的js文件:

小程序的后台获取数据方式get/post具体函数格式如下:wxrequest({})

如果屏幕中某元素的内容超过此元素的高度,可设置元素为scroll-view 为滚动状态元素,这样可以做到元素固定高度且元素内容滚动屏幕不滚动的效果;

scroll-view标签的主要属性分为以下几种:

微信小程序广告轮播元素 所在元素/swiper-item>

其中属性有:

更改事件:bindchange='imgchange' imagechange()的edetailcurrent为当前显示页面的下标值

对于小程序开发的发票,企业单位和非企业单位的选择,首先要看您的身份,如果是企业单位,则可以选择企业单位;如果是非企业单位,则可以选择非企业单位。此外,需要注意发票开具的相关规定,根据国家规定,发票中的企业名称应为“企业法人名称”;若是非企业单位,则应该填写“非企业组织名称”。

关于是否使用rpx还是px,首先需要明白两者之间的区别。

rpx:微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。微信官方建议视觉稿以iphone6为标准,一般设计师出图为2倍图。

px:iphone6上1px=2rpx

1rpx相当于1个物理像素,何为物理像素,就相当于我们所使用的屏幕的尺寸,只不过换了一种说法叫物理像素,而我们平时css中所用到的px,实际上是数据显示的尺寸,比如文字,、设计样式的盒子的大小1rpx的出现为我们搭起了物理像素与样式像素px之间的桥梁,而且根据屏幕宽度进行自适应

<view class="box">rpx的像素</view>

<view class="bo">px的像素观察</view>

box{  width:300rpx;  height:200rpx;  border:1rpx solid black;  font-size:30rpx;}bo{   width:300px;  height:200px;  border:1px solid black;  font-size:30px;}

结果:

所以,小程序中字体大小用rpx还是px要结合设计师出图的文字大小,建议的话还是以rpx为主。

以上就是关于设计微信小程序是按照什么尺寸做全部的内容,包括:设计微信小程序是按照什么尺寸做、微信小程序开发常用知识点、小程序开发票企业单位非企业单位怎么选等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/9682276.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存