与iOS开发很相似，小程序的导航栏也可以全局设置一下，在公共文件app.json中设置了导航栏相关样式如下：
这个地方是全局设置，如果想要在不同的页面设置各自的标题属性，只需要在该子级文件中设置
子页面想调用共公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 = 0.5px。
具体的 这里有一片文章介绍的很详细 ， 还有这个
小程序的事件主要有：
小程序中的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文件中，面向对象的方式模型输出： module.exports={要调用的函数名称：要调用的函数名称 }；
2：在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址")； 可以输出一下object就能看到被调用的方法了；
例子如下：
要调用的js文件：
小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})
如果屏幕中某元素的内容超过此元素的高度，可设置元素为scroll-view 为滚动状态元素，这样可以做到元素固定高度且元素内容滚动屏幕不滚动的效果；
scroll-view标签的主要属性分为以下几种：
微信小程序广告轮播元素 图片所在元素/swiper-item>
其中属性有：
图片更改事件：bindchange='imgchange' imagechange()的e.detail.current为当前显示页面的下标值
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<body onselectstart="return false">
white-space: pre-wrap
-webkit-tap-highlight-color: transparent
注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap
filter: brightness(100)变白
第二行变第一行不变
body{}
小程序上fixed成功过
一般这种都让ios或者安卓端禁止掉，然后在有d性需求的页面添加样式
overflow-y: scroll
-webkit-overflow-scrolling : touch
即可
-webkit-overflow-scrolling: touch
//小程序 h5 交互
touches: 当前屏幕上所有触摸点的列表
targetTouches: 当前对象上所有触摸点的列表
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性：
1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4. 手指滑动时，三个值都会发生变化
5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。
3.touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用e.preventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
var e=arguments[0]
e.preventDefault()
}
webpack-config dev-server 添加 disableHostCheck: true,
html的font-size还没设置的时候展示的样式是错误的
关于获取各种浏览器可见窗口大小的一点点研究
经本地测试和研究再次对 document.documentElement.clientWidth 进行解释：
每一个html文件在浏览器中都会被解析为一个页面，document.documentElement.clientWidth则是获取本页面的宽度。
下面进行举例子说明：
1） 如果在浏览器全屏，并且打开的一个标签页中只包含一个页面，则document.documentElement.clientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度：即window.screen.availWidth
2）当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面：则document.documentElement.clientWidth即本页面的宽度=浏览器的宽度！=屏幕可用工作区宽度：即window.screen.availWidth
3）当打开的一个标签页中不只包含一个页面：比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面，如下所示
则iframe指向页面的document.documentElement.clientWidth不再等于浏览器宽度，而是等于ifame的宽度
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）