佛山建网站的公司,低价网站建设公司,金华市开发区人才网,wordpress 外链接口1 请谈谈微信小程序主要目录和文件的作用#xff1f;
project.config.json 项目配置文件#xff0c;用得最多的就是配置是否开启https校验#xff1b; App.js 设置一些全局的基础数据等#xff1b; App.json 底部tab, 标题栏和路由等设置#xff1b; App.wxss 公…1 请谈谈微信小程序主要目录和文件的作用
project.config.json 项目配置文件用得最多的就是配置是否开启https校验 App.js 设置一些全局的基础数据等 App.json 底部tab, 标题栏和路由等设置 App.wxss 公共样式引入iconfont等 pages 里面包含一个个具体的页面 index.json (配置当前页面标题和引入组件等) index.wxml (页面结构) index.wxss (页面样式表) index.js (页面的逻辑请求和数据处理等)
1.1 简单描述下微信小程序的相关文件类型
WXML WeiXin Markup Language是框架设计的一套标签语言结合基础组件、事件系统可以构建出页面的结构。内部主要是微信自己定义的一套组件。 WXSS (WeiXin Style Sheets)是一套样式语言用于描述 WXML 的组件样式 js 逻辑处理网络请求 json 小程序设置如页面注册页面标题及tabBar。 app.json 必须要有这个文件如果没有这个文件项目无法运行因为微信框架把这个作为配置文件入口整个小程序的全局配置。包括页面注册网络设置以及小程序的window背景色配置导航条样式配置默认标题。 app.js 必须要有这个文件没有也是会报错但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
2. 请谈谈wxml与标准的html的异同
都是用来描述页面的结构 都由标签、属性等构成 标签名字不一样且小程序标签更少单一标签更多 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 WXML仅能在微信小程序开发者工具中预览而HTML可以在浏览器内预览 组件封装不同 WXML对组件进行了重新封装 小程序运行在JS Core内没有DOM树和window对象小程序中无法使用window对象和document对象。
3 请谈谈WXSS和CSS的异同
都是用来描述页面的样子 WXSS 具有 CSS 大部分的特性也做了一些扩充和修改 WXSS新增了尺寸单位WXSS 在底层支持新的尺寸单位 rpx WXSS 仅支持部分 CSS 选择器 WXSS 提供全局样式与局部样式
4 你是怎么封装微信小程序的数据请求的
在根目录下创建utils目录及api.js文件和apiConfig.js文件 在apiConfig.js 封装基础的get, post 和 put upload等请求方法设置请求体带上token和异常处理等 在api中引入apiConfig.js封装好的请求方法根据页面数据请求的urls, 设置对应的方法并导出 在具体的页面中导入
5 小程序页面间有哪些传递数据的方法
使用全局变量实现数据传递 在 app.js 文件中定义全局变量 globalData 将需要存储的信息存放在里面
// app.jsApp({// 全局变量globalData: {userInfo: null}
})使用的时候直接使用 getApp() 拿到存储的信息 使用 wx.navigateTo 与 wx.redirectTo 的时候可以将部分数据放在 url 里面并在新页面 onLoad 的时候初始化
//pageA.js// Navigate
wx.navigateTo({url: ../pageD/pageD?nameraymondgendermale,
})// Redirect
wx.redirectTo({url: ../pageD/pageD?nameraymondgendermale,
})// pageB.js
...
Page({onLoad: function(option){console.log(option.name is option.gender)this.setData({option: option})}
})需要注意的问题 wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面 onLoad 只执行一次 使用本地缓存 Storage 相关
6 请谈谈小程序的双向绑定和vue的异同
大体相同但小程序直接this.data的属性是不可以同步到视图的必须调用this.setData()方法
7 请谈谈小程序的生命周期函数
onLoad() 页面加载时触发只会调用一次可获取当前页面路径中的参数。 onShow() 页面显示/切入前台时触发一般用来发送数据请求 onReady() 页面初次渲染完成时触发, 只会调用一次代表页面已可和视图层进行交互。 onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。 onUnload() 页面卸载时触发如redirectTo或navigateBack到其他页面时。
8 简述微信小程序原理
小程序本质就是一个单页面应用所有的页面渲染和事件处理都在一个页面内进行但又可以通过微信客户端调用原生的各种接口 它的架构是数据驱动的架构模式它的UI和数据是分离的所有的页面更新都需要通过对数据的更改来实现 它从技术讲和现有的前端开发差不多采用JavaScript、WXML、WXSS三种技术进行开发 功能可分为webview和appService两个部分 webview用来展现UIappService有来处理业务逻辑、数据及接口调用 两个部分在两个进程中运行通过系统层JSBridge实现通信实现UI的渲染、事件的处理等。
9. 你使用过哪些方法来提高微信小程序的应用速度
提高页面加载速度 用户行为预测 减少默认data的大小 组件化方案
10 小程序与原生App哪个好
小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势在服务请求延时与用户使用体验是都得到了较大幅度 的提升使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。
11 简述微信小程序原理
微信小程序采用JavaScript、WXML、WXSS三种技术进行开发从技术讲和现有的前端开发差不多但深入挖掘的话却又有所不同。 JavaScript首先JavaScript的代码是运行在微信App中的并不是运行在浏览器中因此一些H5技术的应用需要微信App提供对应的API支持而这限制住了H5技术的应用且其不能称为严格的H5可以称其为伪H5同理微信提供的独有的某些APIH5也不支持或支持的不是特别好。 WXMLWXML微信自己基于XML语法开发的因此开发时只能使用微信提供的现有标签HTML的标签是无法使用的。 WXSSWXSS具有CSS的大部分特性但并不是所有的都支持而且支持哪些不支持哪些并没有详细的文档。 微信的架构是数据驱动的架构模式它的UI和数据是分离的所有的页面更新都需要通过对数据的更改来实现。 小程序分为两个部分webview和appService。其中webview主要用来展现UIappService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行通过系统层JSBridge实现通信实现UI的渲染、事件的处理
12 分析下微信小程序的优劣势
优势 无需下载通过搜索和扫一扫就可以打开。 良好的用户体验打开速度快。 开发成本要比App要低。 安卓上可以添加到桌面与原生App差不多。 为用户提供良好的安全保障。小程序的发布微信拥有一套严格的审查流程 不能通过审查的小程序是无法发布到线上的。
劣势 限制较多。页面大小不能超过2M。不能打开超过9个层级的页面。 样式单一。小程序的部分组件已经是成型的了样式不可以修改。例如幻灯片、导航。 推广面窄不能分享朋友圈只能通过分享给朋友附近小程序推广。其中附近小程序也受到微信的限制。 依托于微信无法开发后台管理功能。 无需下载通过搜索和扫一扫就可以打开。 良好的用户体验打开速度快。 开发成本要比App要低。 安卓上可以添加到桌面与原生App差不多。 为用户提供良好的安全保障。小程序的发布微信拥有一套严格的审查流程 不能通过审查的小程序是无法发布到线上的。
13 微信小程序与H5的区别
第一条是运行环境的不同 传统的HTML5的运行环境是浏览器包括webview而微信小程序的运行环境并非完整的浏览器是微信开发团队基于浏览器内核完全重构的一个内置解析器针对小程序专门做了优化配合自己定义的开发语言标准提升了小程序的性能。 第二条是开发成本的不同 只在微信中运行所以不用再去顾虑浏览器兼容性不用担心生产环境中出现不可预料的奇妙BUG 第三条是获取系统级权限的不同 系统级权限都可以和微信小程序无缝衔接 第四条便是应用在生产环境的运行流畅度 长久以来当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时它的体验总是不尽人意需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立
第四条便是应用在生产环境的运行流畅度
14 怎么解决小程序的异步请求问题
回调函数方式
app.js
success: function (info) { that.apirtnCallback(info)
}
index.js
onLoad: function () {app.apirtnCallback res {console.log(res) }小程序支持 ES6 语法 在返回成功的回调里面处理逻辑 Promise 异步 async/await
15 小程序的双向绑定和vue哪里不一样
小程序直接this.data的属性是不可以同步到视图的必须手动添加oninput调用
this.setData({noBind:true
})16 小程序的wxss和css有哪些不一样的地方
WXSS 和 CSS 类似不过在 CSS 的基础上做了一些补充和修改 尺寸单位 rpx rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上屏幕宽度为 375px共有 750 个物理像素则 750rpx 375px 750 物理像素 使用 import 标识符来导入外联样式。import 后跟需要导入的外联样式表的相对路径用;表示语句结束
/** index.wxss **/
import ./base.wxss;.container{color: red;
}17 webview中的页面怎么跳回小程序中
答首先在外部网页的HTML要引入最新版的 jweixin-1.3.2.js
script typetext/javascript
srchttps://res.wx.qq.com/open/js/jweixin-1.3.2.js
/script然后 wx.miniProgram.navigateTo({ //如果跳转到tabBar中的页面必须换成switchTourl: /pages/login/login$params})18 小程序关联微信公众号如何确定用户的唯一性
如果开发者拥有多个移动应用、网站应用、和公众帐号包括小程序可通过 unionid 来区分用户的唯一性因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号包括小程序用户的 unionid 是唯一的。换句话说同一用户对同一个微信开放平台下的不同应用unionid 是相同的
19 如何实现下拉刷新
首先在全局 config 中的 window 配置 enablePullDownRefresh 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后该钩子函数执行发起请求方法 请求返回后调用 wx.stopPullDownRefresh 停止下拉刷新
20 使用webview直接加载要注意哪些事项
一, 必须要在小程序后台使用管理员添加业务域名 二、h5页面跳转至小程序的脚本必须是1.3.1以上 三、微信分享只可以都是小程序的主名称了如果要自定义分享的内容需小程序版本在1.7.1以上 四、h5的支付不可以是微信公众号的appid必须是小程序的appid而且用户的openid也必须是用户和小程序的。
21 小程序调用后台接口遇到哪些问题
数据的大小有限制超过范围会直接导致整个小程序崩溃除非重启小程序 小程序不可以直接渲染文章内容页这类型的html文本内容若需显示要借住插件但插件渲染会导致页面加载变慢所以最好在后台对文章内容的html进行过滤后台直接处理批量替换p标签div标签为view标签然后其它的标签让插件来做减轻前端的时间。
22 webview的页面怎么跳转到小程序导航的页面
小程序导航的页面可以通过switchTab但默认情况是不会重新加载数据的。 若需加载新数据则在success属性中加入以下代码即可
success: function (e) {var page getCurrentPages().pop();if (page undefined || page null) return;page.onLoad();
}
webview的页面则通过wx.miniProgram.switchTab({url: /pages/index/index})23 小程序和Vue写法的区别
循环遍历的时候小程序是wx:for“list”而Vue是v-for“info in list” 调用data模型的时候小程序是this.data.uinfo而Vue是this.uinfo给模型赋值也不一样小程序是this.setData({uinfo:1})而Vue是直接this.uinfo1
24 为什么要对小程序进行组件模块化设计
微信小程序有代码大小限制通过测试最大为1M 提高代码的复用率
25. 如何进行组件话模块化设计
imageComponent({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/*** 组件的属性列表*/properties: {title: { // 属性名type: String, // 类型必填目前接受的类型包括String, Number, Boolean, Object, Array, null表示任意类型value: 标题 // 属性初始值可选如果未指定则会根据类型选择一个},// 弹窗内容content: {type: String,value: 内容},// 弹窗取消按钮文字btn_no: {type: String,value: 取消},// 弹窗确认按钮文字btn_ok: {type: String,value: 确定} },/*** 组件的初始数据*/data: {flag: true,},/*** 组件的方法列表*/methods: {//隐藏弹框hidePopup: function () {this.setData({flag: !this.data.flag})},//展示弹框showPopup () {this.setData({flag: !this.data.flag})},/** 内部私有方法建议以下划线开头* triggerEvent 用于触发事件*/_error () {//触发取消回调this.triggerEvent(error)},_success () {//触发成功回调this.triggerEvent(success);}}})Component 构造器构造的组件也可以作为页面使用。 使用 this.data 可以获取内部数据和属性值但不要直接修改它们应使用 setData 修改。 生命周期函数无法在组件方法中通过 this 访问到。 属性名应避免以 data 开头即不要命名成 dataXyz 这样的形式因为在 WXML 中 data-xyz“” 会被作为节点 dataset 来处理而不是组件属性。 在一个组件的定义和使用时组件的属性名和data字段相互间都不能冲突尽管它们位于不同的定义段中。 Tips: 通过WXML的import和include来使用文件模版 使用WXSS的import引用WXSS文件 使用JS的require来引用JS文件 上边会用到一个 triggerEvent下面我们就来介绍下 自定义组件触发事件时需要使用 triggerEvent 方法指定事件名、detail对象和事件选项。 触发事件的选项包括
image
二常见问题
1.rpxresponsivepixel
微信小程序新定义了一个尺寸单位可以适配不同分辨率的屏幕它规定屏幕宽为750rpx如在 iPhone6 上屏幕宽度为375px共有750个物理像素则750rpx 375px 750物理像素1rpx 0.5px 1物理像素。
2.40013错误
在微信小程序刚出来的时候如果没输入AppID提示这个信息就表示没有破解但是现在官方软件更新可以选择无AppID开发我们可以通过选择无AppID即可解决此错误。建议安装官方开发工具。
3.-4058错误
微信小程序创建项目时选择无AppID创建项目时会生成app.jsonapp.josn是程序启动最重要的文件程序的页面注册窗口设置tab设置及网络请求时间设置都是在此文件下的。如果你创建的项目目录下没有app.json文件就会报下面的错误。 我们看到上面的错误信息中有个数字-4058这应该是初入微信小程序遇到最多的错误了这种一般都是文件缺失后面有个path可以对着该路径看看是否存在这个文件。造成这种错误的原因一般都是创建项目选择的目录不正确或者在app.json注册了一个不存在的页面。 当然还有一种情况就是在app.json文件的pages注册的页面是没有创建的或者你删除了某个页面但是没有取消注册也会是-4058错误。
4.Page注册错误
这个错误可能很容易理解页面注册错误。页面是通过Page对象来渲染的每个页面对应的js文件必须要创建page最简单的方式就是在js文件下写入Page({})在page中有管理页面渲染的生命周期以及数据处理事件都在这完成。这个错误引起的原因一般都是刚创建页面js文件还有有处理或者忘了处理。所以要养成创建页面的同时在js文件先创建Page的习惯.
5.Page route错误
字面意思就是页面路由错误在微信中有两种路由方式一种是在wxml文件使用 如下代码
wxml文件
navigatorurlsearch/search
viewclassserach_view_show bindtapbindtap 搜索/view
/navigator
js文件事件处理函数
bindtap:function(event){
wx.navigateTo({
url: search/search
})
}如果你这样写的话恭喜你你就会看到上面提示的错误这是因为重复调用路由引起的处理方法就是删除一个路由删除组件或者删除wx.navigateTo。除了上面说的可能导致路由错误外还有一种情况类似于下面的代码
navigatorurlsearch/search
navigatorurlsearch/search
viewclassserach_view_show bindtapbindtap 搜索/view
/navigator
/navigator这种也是不允许的也就是说组件内部不能再嵌套组件。它只能是单层存在的。
6.Do not have * handler in currentpage.
大概意思就是当前页面没有此处理让确定是否已经定义还指出了错误出现的可能位置pages/message/message,其实这种问题出现一般就是我们在wxml定义了一些处理事件但是在js文件中没有实现这个时事件的处理方法就会出现这个错误。那么我们按提示在js文件加上事件处理如下代码加上后就不会再有此错误提示。 bindtap:function(event){
wx.navigateTo({url:search/search
})},7.tabBar设置不显示
对于tabBar不显示原因有很多查找这个错误直接去app.json这个文件最常见的也是刚学习微信小程序最容易犯的错误无外乎下面几种 注册页面即将页面写到app.json的pages字段中如
pages:[pages/message/message,pages/contact/contact,pages/dynamic/dynamic,pages/dynamic/music/music,pages/index/index,pages/logs/logs]· tabBar写法错误导致的不显示将其中的大写字母B写成小写导致tabBar不显示。 · tabBar的list中没有写pagePath字段或者pagePath中的页面没有注册 · tabBar的list的pagePath指定的页面没有写在注册页面第一个。微信小程序的逻辑是pages中的第一个页面是首页也就是程序启动后第一个显示的页面如果tabBar的list的pagePath指定的页面都不是pages的第一个当然也就不会显示tabBar了。 · tabBar的数量低于两项或者高于五项微信官方中明确规定tabBar的至少两项最多五项。超过或者少于都不会显示tabBar。
8. 生命周期函数
onLoad: 页面加载一个页面只会调用一次可以在 onLoad 中获取打开当前页面所调用的 query 参数。 onShow: 页面显示每次打开页面都会调用一次。 onReady: 页面初次渲染完成 一个页面只会调用一次代表页面已经准备妥当可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期 onHide: 页面隐藏当navigateTo或底部tab切换时调用。 onUnload: 页面卸载当redirectTo或navigateBack的时候调用。
9.wx.navigateTo无法打开页面
一个应用同时只能打开9个页面当已经打开了9个页面之后wx.navigateTo不能正常打开新页面。请避免多层级的交互方式或者使用wx.redirectTo
10.本地资源无法通过 css 获取
background-image可以使用网络图片或者 base64或者使用标签
11.页面间数据传递
微信小程序路由页面跳转是通过API wx.navigateTo或者wxml中组件实现的不管哪种实现都会有一个重要的参数就是url它指定了要跳转的页面并且页面之间数据传递也是通过url来实现的这个数据传递有点类似于我们使用的get网络请求把参数都拼接在要跳转界面地址的后面并以“”连接。然后将要传入的数据以键和值的形式追加在?“后面多个参数直接用”符合。如我们点击消息聊天记录将列表上的数据传到下一个页面可以这样写。 navigatorurl/pages/dynamic/dynamic?title{{item.title}}message{{item.message}}viewclassitem viewclassitem-leftimagesrc{{item.url}} classimage//viewviewclassitem-middleviewtextclasstitle{{item.title}}/text/viewviewtextclassmessage{{item.message}}/text/view/viewviewclassitem_rightviewtext classtime{{item.time}}/text/viewviewclassmark wx:if{{item.count0}}textclasstext{{item.count}}/text/view/view/viewview classline/view/navigator而数据接收是在js文件的page里接收的page生命周期有一个onLoad函数它就是做一些初始化数据的工作onLoad函数有一个参数options我们就可以通过key将数据获取如下
Page({data:{// text:这是一个页面isHiddenToast:true}onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数console.log(options.title)console.log(options.message)},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭},bindtap:function(event){
wx.navigateTo({url: /pages/message/search/search
})},
})12 bindtap和catchtap的区别是什么
相同点首先他们都是作为点击事件函数就是点击时触发。在这个作用上他们是一样的可以不做区分 不同点他们的不同点主要是bindtap是不会阻止冒泡事件的catchtap是阻值冒泡的
13 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别
wx.navigateTo()保留当前页面跳转到应用内的某个页面。但是不能跳到 tabbar 页面 wx.redirectTo()关闭当前页面跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 wx.switchTab()跳转到 abBar 页面并关闭其他所有非 tabBar 页面 wx.navigateBack()关闭当前页面返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈决定需要返回几层 wx.reLaunch()关闭所有页面打开到应用内的某个页面
