微信小程序开发(一)基础知识学习

摘要:
设备可以控制显示器的最小单元可以被视为对应的像素。通常,应以iPhone 6的DPR为准,等于2。适配方案:① 雷姆② 视口③ 百分比(很少使用)小程序使用rpx,它是iPhone6的物理像素,是css像素的两倍。

1.特点:  

  ①无DOM对象(虚拟DOM),一切基于组件化(复用、解耦)

  ②四个重要文件: *.js、*.wxml --> html、.wxss --> css、*.json

  ③无需下载,同app互补,刚发布压缩包小于2M(2017年4月公布)

2.移动端适配:

  物理像素:屏幕的分辨率。设备能控制显示的最小单元,可以看成是对应的像素点。

  CSS像素(在Android中叫设备独立像素):可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素,然后由相关系统转换为物理像素。

  DPR:设备像素比,物理像素/设备独立像素。一般以iPhone 6 的DPR为准,等于2(人类肉眼极限)。

  PPI(pixels per inch):一英寸的显示屏上的像素点个数。

  DPI(dots per inch):每英寸墨点,多用于打印机,但也可用与显示器。一般情况下,1 DPI = 1 PPI。

  适配方案:①rem ②viewport(width = device-width) ③百分比(不常用)

    小程序采用rpx,为iphone6的物理像素,是css像素的两倍。即1rpx = 0.5px(底层已经做了viewport适配处理,即实现了理想视口)。

3.页面结构:

  微信小程序开发(一)基础知识学习第1张

 4.数据绑定和事件分类

  数据绑定:同Vue一样,可以初始化在当前页面的管理内存data中,页面中使用数据会自动去data中找。

1 Page({
2    data:{
3        mag:"哈哈"         
4     } ,
5 })    

  事件分类:冒泡事件和非冒泡事件   事件绑定使用key+value的形式,key分为bind(普通绑定)、catch(非冒泡绑定)、mut-bind(互斥事件绑定),如bindtap、catchtap、mut-bindtap事件。

5.生命周期函数

  两个线程,一个页面(相当于wxml和wxss),一个服务(相对于js)

 微信小程序开发(一)基础知识学习第2张

6.模板template

  定义:template属性 name(标识模板)

  使用:template属性 is(模板的name)

  引入:<import src='http://t.zoukankan.com/path'> 引入模板结构  @import 'path' 引入模板样式

  传参:data = ‘{{...item}}’

7.列表渲染

  wx:for

  wx:key标记每个个体元素

  遍历的个体:item   遍历的下标:index

  

免责声明:文章转载自《微信小程序开发(一)基础知识学习》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇分布式事务分布式锁的常用解决方式svn命令行批量删除和批量添加下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

opencv输出图片像素值

需求:在控制台输出灰度图像的像素值 代码: #include <stdio.h>#include <iostream>#include <opencv2/core/core.hpp>#include <opencv2/highgui/highgui.hpp>#include <opencv2/imgpr...

微信小程序插件使用

使用插件 小程序开发者可便捷地把插件添加到自己的小程序内,丰富小程序的服务。当用户在使用小程序时,将可以在小程序内使用插件提供的服务。 开放范围 所有小程序 接入流程 在小程序管理后台添加插件 小程序开发者可在”小程序管理后台-设置-第三方服务-插件管理“中,根据AppID查找需要的插件,并申请使用。插件开发者在24小时内通过后,小程序开发者可在小程序...

有关Canvas的一点小事—canvas数据和像素点

1、  canvas生成base64数据 canvas.toDataURL()生成的数据可以直接给image对象使用作为<img>显示在前端,也可以传给后台生成图片保存。前端生成保存图片的好像也有,但是比较麻烦,而且不兼容。我记得zip.js就可以在前端打包图片生成压缩包,不过我现在用不到,哪天想到了再整理整理。                ...

完美方案——iOS的WebView自适应内容高度

/////////////////////////////初始化,self.view是父控件///////////////////////////////// _webView = [[UIWebView alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 0...

HTML5 Canvas 获取网页的像素值。

我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值。 自从HTML5 画布出来之后。就有更好的方法来获取了,比方郭阿里巴巴ICON矢量库 用的SVG和渐变来进行绘制: 我昨天用Canvas来绘制了一下。由于Canvas有现成的方法getImageDat...

HOG 特征提取算法(原理篇)

在计算机视觉中人们设计了很多算法来提取空间特征,并利用图像梯度信息来识别物体。 其中一种技术叫做 HOG,也即方向梯度直方图(Histogram of Oriented Gradient)。方向梯度直方图听着太高深了,我们先来讲一下这些术语。 直方图就是数据分布的一种图形表现,看起来有点像柱形图,其柱形有不同的高度,每个柱形代表一组处于一定值范围的数据...