口碑好的聊城网站建设,效果图怎么收费,有限公司和责任公司的区别,衡阳建设学校网站文章目录前言请谈谈WXML与标准的html的异同#xff1f;请谈谈WXSS和CSS的异同#xff1f;请谈谈微信小程序主要目录和文件的作用#xff1f;请谈谈小程序的双向绑定和vue的异同#xff1f;简单描述下微信小程序的相关文件类型#xff1f;微信小程序有哪些传值(传递数据)方…
文章目录前言请谈谈WXML与标准的html的异同请谈谈WXSS和CSS的异同请谈谈微信小程序主要目录和文件的作用请谈谈小程序的双向绑定和vue的异同简单描述下微信小程序的相关文件类型微信小程序有哪些传值(传递数据)方法bindtap和catchtap的区别wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别微信小程序与H5的区别小程序和Vue写法的区别rpx的理解微信小程序可以进行dom操作吗微信小程序与vue区别前言
请谈谈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)// 从本地缓存中移除指定 keywx.removeStorgae(data)使用路由传递数据 详细解释如果一个页面由另一个页面通过 wx.navigateTo 打开这两个页面间将建立一条数据通道被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。传递组件wx.navigateTo({url: test?id1,success: (res) {// 通过 eventChannel 向被打开页面传送数据res.eventChannel.emit(acceptDataFromOpenerPage, { data: test })}})bindtap和catchtap的区别
概念 bindtap和catchtap都属于点击事件函数将事件绑定到组件上点击组件后可以触发函数。 bindtap 子元素使用bindtap绑定事件后执行的时候会冒泡到父元素触发父元素上绑定的bingtap事件 catchtap 不会冒泡到父元素上阻止事件冒泡 二者区别 bindtap : 向上冒泡catchtap向上不冒泡wxml: viewbutton bindtaptagName点击事件/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 clickdl登陆/buttoninput typetext inputinput/微信小程序绑定微信小程序原声写法前面加bind后面加事件名button bindtapdl登陆/buttoninput typetext bindinputinput/事件函数传值
vue事件函数传值vue传值直接写在函数括号中button clickdl(index)登陆/button微信小程序事件函数传值微信小程序传值需要用data-自定义名字{{需要传递的值}}button bindtapdl data-index{{index}}登陆/buttonif语句
vue的if语句if语句前加 “v-”div v-ifindex 11divdiv v-else-ifindex 22divdiv v-else3div
微信小程序if语句微信小程序if语句前加 “wx:”而且判断内容需要用 {{双大括号}} 包起来第二行的else-if直接省略成elifview wx:if{{index 1}}1viewview wx:elif{{index 2}}2viewview wx:else3view关键字引用
vue的关键字引用vue中属性名前面加 “:” 或者 v-bindimg :srcsrc /
微信小程序关键字引用微信小程序中只需要属性值加“{{}}”包起来就行image src{{src}} /for列表渲染
vue的for列表渲染vue的for语法(每一项数据名索引名) in 数据名block v-for(item,i) in list :keyidiv{{item.text}}/div/block
微信小程序的for列表渲染微信小程序的for里只写数据名 如果需要修改当前元素的数据名wx:data-item“自定义的数据名” 如果需要修改当前元素的索引名wx:data-index“自定义的索引名” 默认数据名是item默认索引名是indexrpx的理解
简介 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(bindevent)或者 catchtap(catchevent) 绑定事件,vue使用 v-on:event 绑定事件或者使用event 绑定事件 数据双向绑定也不也不一样在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值当表单元素内容发生变化时data中对应的值也会相应改变这是 vue非常 nice 的一点。微信小程序必须获取到表单元素改变的值然后再把值赋给一个 data中声明的变量。
