小程序进阶之路：跨平台开发避坑指南( 二 ) _小程序

由此，我们在 2018 年底进行了百度小程序的开发工作，由于在前期积累了小程序开发经验，百度小程序的开发更加的平稳和快速，不到一个月就上线运营了。
2 应用场景
百度小程序入口：

文章插图

三种入口：百度App搜索关联、百度贴吧关联、其他百度生态搜索关联。
3 开发实战
下面是淘票票百度小程序开发过程中遇到的坑和总结：
1）基础开发
百度小程序的开发与微信、头条小程序的开发方式和框架概念非常相似，都属于前端开发的一块子集，主要可以分为 4 块来构建百度小程序的页面：

第一块：html 。构建页面框架：使用 xxx.swan 文件进行页面元素框架的搭建，具有独特的 HTML 标签如 view，scroll-view 等。

第二块：css 。管理页面样式：使用 xxx.css 文件进行页面样式的管理，基本的 CSS 的样式都大部分支持。

第三块：JS 。编写页面逻辑：使用 xxx.js 文件进行页面逻辑的书写，小程序具有其独特的生命周期管理方法。

第四块：JSON 。组件注册：百度小程序支持通过组件的方式进行页面的搭建，通过在 xxx.json 中注册组件供页面使用。

2）template 模板使用
与其他的小程序相同，百度小程序也提供了模板 template 的能力，使用模板可以提高工程化和代码可维护性，开发者可以在模板中设计代码片段，向外暴露接口注入外界变量之后，可以在合适的时机去使用该代码片段。
但是在百度小程序使用 template 使用时，需要注意传递数据时需要使用 {{{ }}} 三层花括号包裹对象，否则数据注入时会出现异常。
百度小程序的 template 的使用：

<template is="xxx" data=https://www.isolves.com/it/cxkf/ydd/xcx/2020-07-13/"{{{item}}}"/>作为对比，头条、微信小程序 template 需要两层花括号：

<template is="xxx" data=https://www.isolves.com/it/cxkf/ydd/xcx/2020-07-13/"{{item}}"/>3）组件属性的 observer 使用
在使用组件（Component）是大概率会使用到属性的 observer 方法，当属性被改变时会执行属性对应的 observer 方法，此处需要注意在使用 observer 方法时，避免使用下划线开头的方法名，可能会造成 observer 方法的循环调用问题。
或者当发现 properties 中的 observer 方法被循环调用时，检查一下 observer 绑定的方法是否有下划线。方法命名移除下划线，大概率可以解决循环调用问题。
会出现 observer 循环调用的情况：

isShowLoadMore: {type: Boolean,value: false,observer: '_isshowChange'},推荐的写法：

isShowLoadMore: {type: Boolean,value: false,observer: 'isshowChange'},4）scroll-view 的使用
在使用 scroll-view 的开发过程中，对存在多个可滑动区域的页面且其中一个滑动区域为 fixed 样式时，IOS 机型会偶现 scroll-view 空白的问题。
可能存在异常的页面布局如下:

<view class='头部组件' style='position:fixed'/>

<scroll-view class='可滑动区域1' style='position:fixed' />

<view class='可滑动区域2' />其中 “可滑动区域 2” 为依赖内容撑开的页面 View，当内容到达一定长度时，页面 View 会提供滑动能力。如果使用上述写法可能会出现 scroll-view 空白的问题。
推荐的写法：

<view class='头部组件' style='position:fixed'/>

<scroll-view class='可滑动区域1' style='position:fixed;height:44px' />

<scroll-view class='可滑动区域2' style='height:80vh' />5）小程序 DSL 页与 WebView 页的登录流程
小程序的页面实现方式可以分为两种：一种为小程序原生的页面；另外一种是使用 WebView 组件，将 H5 页面展示在小程序中。处理两种页面的登录时一般是先进行 DSL 页登录（小程序原生页面），完成 DSL 页登录后，再进行 H5 容器页的登录。
a) DSL 页登录
先进行小程序的登录授权，获取到小程序的登录凭证，拿着登录凭证去自己的业务服务端获取真实的小程序登录信息，当开发者完成上述流程之后，将登录态信息加密后存储在本地。下次进行需要登录校验的页面时，进行本地登录信息的登录校验，则 DSL 页的登录流程就完成了。