前言
请谈谈WXML与标准的html的异同?
WXML是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中HTML。
- 都是用来描述页面的结构;
- 都由标签、属性等构成;
- 标签名字不一样,且小程序标签更少,单一标签更多;
- 小程序多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
- WXML仅能在微信小程序开发者工具中预览,而HTML可以在浏览器内预览
- 组件封装不同, WXML对组件进行了重新封装,
- 小程序运行在JS Core内,没有DOM树和window对象,小程序中无法使用window对象和document对象
请谈谈WXSS和CSS的异同?
首先新增了 rpx尺寸单位 CSS中需要手动进行像素单位换算,例如rem WXSS支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算 提供了全局的样式和局部样式 项目根目录中的app.wxss会作用于所有小程序页面 局部页面的.wxss样式仅对当前页面生效 WXSS仅支持部分CSS选择器 .类选择器和id选择器 元素选择器 并集选择器、后代选择器 ::after和::before等伪类选择
请谈谈微信小程序主要目录和文件的作用?
project.config.json: 项目配置文件,用得最多的就是配置是否开启https校验;
App.js :设置一些全局的基础数据等,页面的脚本文件,存放页面的数据、事件处理函数等;
App.json :当前页面的配置文件,配置窗口的外观 、表现等,页面中的配置项会覆盖 app.json的;
App.wxss :公共样式,引入iconfont等;
pages: 里面包含一个个具体的页面;
index.json: (配置当前页面标题和引入组件等);
index.wxml:页面的模板结构文件;
.wxss文件:当前页面的样式表文件;
index.js :(页面的逻辑,请求和数据处理等);
请谈谈小程序的双向绑定和vue的异同?
- 小程序中的数据双向绑定
首先通过 bindinput 绑定文本框的输入事件
在 data 中声明一个变量 content ,将其动态绑定成文本框的 value 值
在 bindinput 事件中通过事件参数 e.detail.value 可以获取到文本框中最新的 value 值
通过 this.setData 将文本框最新的 value 值 赋值给 动态绑定的value值 content 即可实现数据的双向绑定 - vue中的数据双向绑定
首先为文本框绑定 @input 监听文本框的输入事件
为文本框动态绑定 value 属性,其值是在data中定义的变量
在 @input绑定的事件中 通过事件参数 event.target.value 可以获取到 input 框中最新的value值
将其重新获取到的 value 赋值给 value值动态绑定的那个变量
区别:
大体上区别不大,绑定事件不同,以及获取value值的具体方式不同,以及在小程序中设置data中的数据,
需要调用 this.setData方法进行设置。
简单描述下微信小程序的相关文件类型?
1.WXML(weixin Markup Language) 是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构。内容主要事微信自己定义的一套组件。
2.WXSS(WeiXin Style Sheets) 是一套样式语言,主要用于描述 WXML 的组件样式。
3.JS 逻辑处理,网络请求
4.json 小程序设置,静态配置
主要文件
app.json 必须要有这个文件,此文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置tabBar 最少两个。
4个配置项的作用
pages:用来记录当前小程序所有页面的路径
window :全局定义小程序所有页面 的背景色、文件颜色等
style:全局定义小程序组件所使用的样式版本
sitemapLocation:用来指明sitemap.json的位置
微信小程序有哪些传值(传递数据)方法?
- 使用全局变量传递数据
利用app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过getApp().globalData 获取数据 例如: App({ globalData:{ data: { name: 'demo' } } }) 使用组件 app.globalData.data
- 使用本地存储数据传递
使用小程序提供缓存: 同步缓存:wx.setStorageSync 与 wx.getStorageSync 异步缓存:wx.setStorage 与 wx.getStorage 移除本地缓存:wx.removeStorageSync(同步)、wx.removeStorage(异步) // 将数据存储在本地缓存中指定的 key 中 例如:wx.setStorgaeSync('data','hello') // 从本地缓存中同步获取指定 key 的内容 wx.getStorageSync('data') // 从本地缓存中移除指定 key wx.removeStorgae('data')
- 使用路由传递数据
详细解释: 如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道: 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象; wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。 这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。 传递组件 wx.navigateTo({ url: 'test?id=1', success: (res)=> { // 通过 eventChannel 向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } })
bindtap和catchtap的区别?
概念: bindtap和catchtap都属于点击事件函数,将事件绑定到组件上,点击组件后可以触发函数。
- bindtap :子元素使用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父元素上绑定的bingtap事件)
- catchtap :不会冒泡到父元素上,阻止事件冒泡
二者区别:
bindtap : 向上冒泡 catchtap:向上不冒泡
wxml:
<view> <button bindtap="tagName">点击事件</button> </view>
.js 页面写入
tagName: function(e){ console.log(e); }
wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?
常见的微信小程序页面跳转方式有如下:
- wx.navigateTo(Object)
对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面, 以提高加载速度。 当页面特别多时,则不推荐使用
- wx.redirectTo(Object)
wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面。可以避免跳转前页面占据 运行内存, 但返回时页面需要重新加载,增加了返回页面的显示时间
- wx.switchTab(Object)
跳转到 tabBar页面,并关闭其他所有非 tabBar 页面
- wx.navigateBack(Object)
wx.navigateBack() 用于关闭当前页面,并返回上一页面或多级页面,开发者可 通过 getCurrentPages() 获取当前的 页面栈,决定需要返回几层则设置对象的delta属性即可
- wx.reLaunch(Object)
关闭所有页面,打开到应用内的某个页面,返回的时候跳到首页
总结
关于上述五种跳转方式,做下总结:
navigateTo 保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页
redirectTo 关闭当前页面,跳转到应用内的某个页面
switchTab 跳转到 tabBar 页面,同时关闭其他非 tabBar 页面
navigateBack 返回上一页面
reLanch 关闭所有页面,打开到应用内的某个页面
其中关于它们的页面栈的关系如下:
avigateTo 新页面入栈
redirectTo 当前页面出栈,新页面入栈
navigateBack 页面不断出栈,直到目标返回页,新页面入栈
switchTab 页面全部出栈,只留下新的 Tab 页面
reLanch 页面全部出栈,只留下新的页面
微信小程序与H5的区别?
从开发的角度
H5和小程序的开发工具就非常不同,小程序都是依赖于微信客户端的,所以相对来说开发工具没有H5那么多; 与标准的H5语言是不一样的;而且还独立了很多的原生app的组件,所以它在组件封装上与H5也都是有所不同
从运行环境来看
网页开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ浏览器等,在移动端需要 面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。 而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端,以及用于辅助开发的小程序开发者 工具,小程序中三大运行环境也是有所区别的。
服务器配置:
因为小程序的性能会比H5 高一些,所以服务器的配置要求上来说,小程序的要求要比H5更高一些
系统权限
因为微信能获取到更多的系统权限,如网络通信状态、数据缓存能力等,这些系统级权限都能与微信小程序无缝衔接, 这也就是官方宣称的微信小程序能够拥有Native App(原生APP)的流畅性能。 而H5 web应用对系统本身的权限的获取则相对少了很多,这一点恰巧是H5 web应用经常被诟病的地方。也因此, H5的大多数应用被圈定在业务逻辑简单、功能单一的范围上。
标签名字有点不一样
写 HTML 的时候,经常会用到的标签是 div, p, span, 小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力。小程序多了 一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化 响应用户的行为。
操作方面来说:
网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行 DOM 选中和操作。
小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而
缺少相关的DOM API和BOM API。
这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。
同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的
小程序和Vue写法的区别?
事件定义区别
vue事件绑定:vue用@来绑定事件 <button @click="dl">登陆</button> <input type="text" @input="input"/> 微信小程序绑定:微信小程序原声写法前面加bind后面加事件名 <button bindtap="dl">登陆</button> <input type="text" bindinput="input"/>
事件函数传值
vue事件函数传值:vue传值直接写在函数括号中 <button @click="dl(index)">登陆</button> 微信小程序事件函数传值:微信小程序传值需要用data-自定义名字={{需要传递的值}} <button bindtap="dl" data-index="{{index}}">登陆</button>
if语句
vue的if语句:if语句前加 “v-” <div v-if="index == 1">1<div> <div v-else-if="index == 2">2<div> <div v-else>3<div> 微信小程序if语句:微信小程序if语句前加 “wx:”,而且判断内容需要用 {{双大括号}} 包起来,第二行的else-if,直接省略成elif <view wx:if="{{index == 1}}">1<view> <view wx:elif="{{index == 2}}">2<view> <view wx:else>3<view>
关键字引用
vue的关键字引用:vue中属性名前面加 “:” 或者 v-bind <img :src="src" /> 微信小程序关键字引用:微信小程序中只需要属性值加“{{}}”包起来就行 <image src="{{src}}" />
for列表渲染
vue的for列表渲染:vue的for语法=(每一项数据名,索引名) in 数据名 <block v-for="(item,i) in list" :key="i"> <div>{{item.text}}</div> </block > 微信小程序的for列表渲染: 微信小程序的for里只写数据名, 如果需要修改当前元素的数据名:wx:data-item=“自定义的数据名” 如果需要修改当前元素的索引名:wx:data-index=“自定义的索引名” 默认数据名是item,默认索引名是index
rpx的理解?
简介:
rpx ( responsive pixel)响应单位。
- rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
- 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为750rpx
- 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配
rpx 和 px之间的换算
在普通网页开发中,最常用的像素单位是px
在小程序开发中,推荐使用rpx这种响应式的像素单位进行开
1 rpx = 0.5 px = 1 物理像素
微信小程序可以进行dom操作吗?
微信小程序不支持document.querySelect获取元素,因为微信小程序的渲染层和逻辑层是独立的,但是它内置了获取元素的两种方法,第一种是通过
wx.createSelectorQuery()获取dom元素,第二种时给想要使用的对象绑定事件,输出e对象,就能拿到该对象的一些信息。
.创建选择器
var query = wx.createSelectorQuery();
2.查询
集合:query.selectAll('.traffic').boundingClientRect(()=>{}).exec() 单个: query.select('.tripinfotitlelist').boundingClientRect(()=>{}).exec()
二、获取dom节点场景
1.与数据渲染无关(dom节点挂载结束即可获取,根据页面生命周期选择合适的时间获取)
2.与数据相关(数据渲染结束获取即可)
this.setData({},{ setTimeout(()=>{ //获取即可 },300) })
微信小程序与vue区别?
生命周期不一样,微信小程序生命周期比较简单
数据绑定也不同,微信小程序数据绑定需要使用{{}},vue 直接:就可以
显示与隐藏元素,vue中,使用 v-if 和 v-show 控制元素的显示和隐藏,小程序中,使用wx-if 和hidden 控制元素的显示和隐藏
事件处理不同,小程序中,全用 bindtap(bind+event),或者 catchtap(catch+event) 绑定事件,vue:使用 v-on:event 绑定事件,或者使用@event 绑定事件
数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是 vue非常 nice 的一点。微信小程序必须获取到表单元素,改变的值,然后再把值赋给一个 data中声明的变量。