微信小程序

373 阅读8分钟

前言:现在很多app都推出了小程序,第一反应应该就是微信小程序吧,最近几年微信小程序也特别火,现在市场的需求也大,也迫使很多人学习小程序的开发。其实小程序不是只有微信小程序,阿里其实也有,但是我们一般说到小程序就是指的是微信小程序,小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

一.小程序的界面结构

  • WXML (WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。
  • WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
  • js 逻辑处理,网络请求。
  • json 小程序设置,如页面注册,页面标题及tabBar。
  • app.json 必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。
  • app.js 必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
  • app.wxss 全局样式

二.小程序生命周期

  • onLoad:页面创建时执行,只执行一次
  • onShow: 页面出现在前台时执行,返回页面也会被执行
  • onReady:监听页面初次渲染完成
  • onHide: 监听页面隐藏
  • onUnload: 监听页面卸载
  • onPullDownRefresh: 监听用户下拉动作

详情还是参考官方文档:developers.weixin.qq.com/miniprogram…

三.小程序与原生APP的区别

  • 是原生APP 需要下载,小程序则不需要,只需要短暂的加载时间。
  • 是原生APP 由于平台的不同,必须开发苹果,安卓两个版本。小程序则不需要,即时打开,即时关闭。安卓用户还可以发送到桌面,某种程度上可以替代原生APP
  • 是由于微信对小程序的限制在 1M,所以原生APP 实现的功能要比小程序多。 由于以上三点的不同,我们来看下小程序的优缺点?
优点:
  • 不用安装,即开即用,用完就走。省流量,省安装时间。
  • 对于小程序拥有者来说,开发成本更低,他们可以更多财力,人力,精力放在如何运营好产品,做好内容本身;
  • 对于用户来说,相较于各种APP,微信小程序UI 和操作流程会更统一。这也会降低用户的使用难度;
  • 服务更加快捷方便,用户的使用门槛大大降低。 微信做的就是把开发和推广这两项成本尽可能的降低,推掉成本这座大山,改变移动互联网应用的规则,让创造者能把核心资源(钱和时间)关注到用户体验上,去真正为用户创造价值。
缺点:
  • 对于大型应用来说,无法实现原生APP 所具有的全部功能。
  • 你所能获取的用户数据将非常有限,微信给你开放的用户数据基本就是头像和昵称还有一定的好友关系。数据对你自己的重要性一定要考虑清楚!
  • 小而美,做垂直,功能复杂度有限制。
  • 用完即走因为没办法多任务处理,你的产品如果不能在一定时间内完成特定场景的需求并且达成自己的目标,你就比较难做。

四.微信小程序与H5的区别?

  • 运行环境不同;传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。
  • 开发成本不同;只在微信中运行,所以不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG。
  • 获取系统级权限不同;系统级权限都可以和微信小程序无缝衔接。
  • 应用在生产环境运行的流畅度,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验不好,需要不断的对项目优化来提升用户体验。微信小程序运行环境独立,不需要去兼容不同的系统。

五.小程序本地缓存

  • 插入 wx.setStorage wx.setStorageSync
  • 读取 wx.getStorage wx.getStorageSync
  • 删除 wx.removeStorage wx.removeStorageSync
  • 清空 wx.clearStorage wx.clearStorageSync
  • 读取缓存信息 wx.getStorageInfo wx.getStorageInfoSync

六.如何提高微信小程序的应用速度?

  • 提高页面加载速度
  • 用户行为预测
  • 减少默认data的大小
  • 组件化

七.什么是小程序的冷启动和热启动

  • 热启动:假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;
  • 冷启动:用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动,即冷启动。

八.在全局文件中配置tabBar时需要注意哪些?

  • 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象。

九.简单阐述一下wx:if 与Hidden的区别?

  • hidden是一个特殊的属性,通过值的真假不同,来判定当前组件显示与隐藏切换,和wx:if有些异曲同工之处,但是二者还是有不同之处:

    1.因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

    2.同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

    3.相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

    4.一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

十.21.微信小程序中如何定义模板及使用模板?

  • 类似于vue.js一样,微信小程序也是存在模板语法的,WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
  • 定义: 使用 name 属性,作为模板的名字。然后在内定义代码片段
  • 使用: 使用 is 属性,声明需要使用的模板,然后将模板所需要的 data 传入

十一.阐述一下import与include的不同之处?

  • import可以在该文件中使用目标文件定义的template,import引用的是template模板之内的内容,include引用的是template模板之外的内容
  • include include 可以将目标文件中除了 template、 wxs 外的整个代码引入,相当于是拷贝到 include 位置,import不具有传递的特性,include具有传递的特性
  • import能传递数据,include不能传递数据,换句话说,import引用的是动态内容,include引用的是静态内容

十二.组件的公共属性有哪些?

  • Id、clas、style、bind、catch、hidden、data-*

十三.微信小程序中bind与catch有什么不同?

●bind bind事件绑定不会阻止冒泡事件向上冒泡

●catch catch事件绑定可以阻止冒泡事件向上冒泡。

十四.例举出常用的路由Api并说明其含义?

  • avigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabBar 页面。使用 wx.navigateBack 可以返回到原页面。

  • navigateBack 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

  • redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面。

  • switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

  • reLaunch 关闭所有页面,打开到应用内的某个页面

十五. 微信小程序中的js运行环境和浏览器js的运行环境有什么不同?

  • 微信小程序js运行环境是jsCore中,没有window和document对象

十六.小程序关联微信公众号如何确定用户的唯一性

  • 如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 unionid 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 unionid 是唯一的。