1200字范文 > taro 请务必在小程序页面中完善页面基础信息_如何一人五天开发完复杂微信小程序...

taro 请务必在小程序页面中完善页面基础信息_如何一人五天开发完复杂微信小程序...

时间：2022-06-09 04:33:00

随着业务需求的不断累加、小程序追求快速产出。

在人手不足且开发周期较短的情况下，我们需要找到一个最大化开发效率的方法。

而高效率的开发离不开规范化、工程化、组件化。

为此整理写下总结，细数小程序中的坑与实践。

介绍我们对小程序高效率开发的思考与探索。

布局方案

导航栏

TabBar

BasicPage

用户系统

登录方案

初始化登录

鉴权

优化及 Bug 追踪

日志收集

数据分析

常用优化方案

preLoad

独立分包加载

布局方案

我们首先思考的是，在小程序中如何快速且高还原产出页面。

为此我们封装了一套页面组件。

导航栏

目前小程序有如下两种导航栏：常规、自定义导航栏

常规布局下，顶部导航栏部分直接使用小程序提供导航栏。

自定义导航栏布局下，我们可以完全控制导航栏样式，赋予导航栏更多交互及 UI 设计上的可能。如上图所示，Readhub 在导航栏中加入了设置按钮，喜茶在个人页中标题渐隐及沉浸式导航栏效果。

可根据具体业务选择具体布局方案，在我们小程序中，我们选择了全部使用自定义导航栏的方式并对其进行了一定封装。

在确定使用自定义导航栏方案后，我们对导航栏进行了拆解

拆解后，我们发现可以将自定义导航栏分为两个部分：StatusBar 及 NavigationBar 。

通过查阅微信 API ，我们分别通过wx.getSystemInfoSync及wx.getMenuButtonBoundingClientRect获取到 StatusBarHeight 及 MenuButton 的布局信息。

由拆解图可知

1NavigationBarPaddingTop=MenuButtonTop-StatusBarHeight

2

3NavigationBarPaddingBottom=NavigationBarPaddingTop

4

5NavigationBar=StatusBarHeight+NavigationBarPaddingTop+NavigationBarPaddingBottom+MenuButtonHeight

得到上述数据后，结果简单封装，我们得到如下方案

StatusBar 部分，我们使用 PaddingTop 填充。

可在此基础上可再进一步封装一些通用 NavigationBar 组件。

我们封装了一些常用 NavigationBar 组件，如下所示：

沉浸式导航栏

自定义 TabBar

目前小程序 TabBar 中也存在两种方案。

常规 TabBar ：微信提供方案，可修改 icon 、文字及其对应选中状态。

自定义 TabBar ：小程序基础库 2.5.0 开始支持。可通过其实现异形 TabBar 或各种自定义样式。

在我们小程序中，我们选择全部使用自定义 TabBar 来实现业务。

由于小程序基础库 2.5.0 之后官方才开始支持自定义 TabBar 。我们此处不直接选择使用 custom-tab-bar 方案。选择结合 custom-tab-bar 、自定义组件及wx.hideTabBar的方案实现。

具体方案为放置空节点 custom-tab-bar 文件。在页面中按需引入自定义 TabBar 组件。在页面初始化完成后调用wx.hideTabBar隐藏原 TabBar 。

这样做的好处在于，在基础库 2.5.0 及更高版本时正常显示，在低版本时以最小代价兼容。

在 iPhone X 系列下的底部安全区兼容方案如下

1@mixinmedia-style(){

2.tab{

3padding-bottom:84px;

4}

5}

6//适配iPhoneX系列下巴

7@mediascreenand(device-width:375px)and(device-height:812px)and(-webkit-device-pixel-ratio:3){

8@includemedia-style();

9}

10

11@mediaonlyscreenand(device-width:414px)and(device-height:896px)and(-webkit-device-pixel-ratio:3){

12@includemedia-style();

13}

14

15@mediaonlyscreenand(device-width:414px)and(device-height:896px)and(-webkit-device-pixel-ratio:2){

16@includemedia-style();

17}

18//下面代码只为适配iPhoneX在微信调试模拟器中为724px

19@mediascreenand(device-width:375px)and(device-height:724px)and(-webkit-device-pixel-ratio:3){

20@includemedia-style();

21}

推荐如无特殊需求，建议直接使用微信提供方案，在自定义 TabBar 方案中安卓手机下拉刷新时， TabBar 会被拉出可视区域。需自定义下拉刷新组件解决

方案整合 BasicPage

以上方案在线上运行一段时间后稳定后。对自定义导航栏及自定义 TabBar 方案进行了整合。封装了 BasicPage 组件。

以我们线上典型页面为例，我们可以将页面分为两大类。

基于以上分析结合线上需求，我们对此基础组件进行封装。

Taro 框架伪代码，可根据各自使用框架进行封装，思路一致

ponent{

2

3state={

4menuButtonHeight:32,

5menuButtonTop:48,

6statusBarHeight:44,

7};

8

9componentDidMount(){

10//...获取并设置menuButtonHeight、menuButtonTop、statusBarHeight

11}

12

13render(){

14return(

15<ViewclassName='basic-page'>16{17this.props.header&&<ViewclassName={`basic-page-header${this.props.fixed?'fixed':''}`}style={{18paddingTop:`${this.state.statusBarHeight}px`,19height:`${(this.state.menuButtonTop-this.state.statusBarHeight)*2+this.state.menuButtonHeight}px`,20}}21>22{this.props.renderHeader}23View>24}25<ViewclassName={`basic-page-body${this.props.tab?'tab':''}`}>26{this.props.renderBody}27View>28{this.props.tab&&<TabBaractive={this.props.tabActive}/>}29View>30);31}32}3334BasicPage.defaultProps={35fixed:false,//header是否浮动36tab:false,37header:false,38tabActive:'template',39};40

使用中会经常用到自定义 TabBar 、自定义 NavigationBar 布局数据。再封装一个工具类获取。

1importTarofrom"@tarojs/taro";

2

3functionrpx2px(rpx,windowWidth){

4returnrpx/750*windowWidth;

5}

6

7exportdefaultclasscustomConfig{

8

9staticfetchAllConfig(){

10constmenuButton=Taro.getMenuButtonBoundingClientRect();

11constsystemInfo=Taro.getSystemInfoSync();

12

13conststatusBarHeight=systemInfo.statusBarHeight;

14constheaderHeight=(menuButton.top-systemInfo.statusBarHeight)*2+menuButton.height;

15constfooterHeight=systemInfo.model.indexOf('iPhoneX')===-1

16?

17rpx2px(100,systemInfo.windowWidth)

18:

19rpx2px(168,systemInfo.windowWidth);//5084

20constbodyHeight=systemInfo.windowHeight-statusBarHeight-headerHeight-footerHeight;

21constnoTabBodyHeight=systemInfo.windowHeight-statusBarHeight-headerHeight;

22

23letdata={

24source:{

25menu:menuButton,

26system:systemInfo,

27},

28height:{

29statusBar:statusBarHeight,

30header:headerHeight,

31body:bodyHeight,

32noTabBody:noTabBodyHeight,

33footer:footerHeight,

34},

35};

36Taro.setStorageSync('customConfig',data);

37returndata;

38}

39

40staticgetconfig(){

41letstorageInfoSync=Taro.getStorageSync('customConfig');

42if(!storageInfoSync){

43storageInfoSync=this.fetchAllConfig();

44}

45returnstorageInfoSync;

46}

47}

到此，我们完成对基础页面组件的封装。目前线上运行小程序所有页面都基于该组件进行开发。

开发新页面时只需要引用该组件即可。

1'index' 2renderHeader={3 4className='my-index-header' 5> 6<Text>TitleText> 7</View> 8} 9renderBody={1011Body12View>13}14/>

用户系统

在一个应用中，用户系统是至关重要的。我们通过数个小程序的开发，整理了一套我们目前正在使用的用户系统实践。

登录、获取用户信息

如上图所示，我们将小程序登录及获取用户信息拆分为两部分。

主要有如下考虑：

降低用户使用门槛，可先让用户体验部分功能。后续分享或互动时提示授权完善用户信息

保证始终持有用户登录态，方便程序处理。如把用户登录及完善用户信息放置一起，在未授权时无法获取自定义登录态。判断变得复杂且无法提前收集 formId

同一开发者账号下，多小程序互通时，如有一小程序用户授权过，可通过返回 unionid 直接同步信息，无需再授权，提升用户体验。

处理注意点

授权获取用户信息时，如果服务端未记录用户 sessionKey ，在 Button type = getUserInfo 回调事件中使用wx.login方法获取 code 的话，会导致 sessionKey 变化。从而导致 getUserInfo 时使用 sessionKey 与新 sessionKey 不匹配。从而导致解密用户信息失败。

解决方案有如下两种：

Button type = getUserInfo 回调事件中使用wx.login方法后，再次调用wx.getUserInfo方法重新获取加密用户信息。

服务端记录 sessionKey ，Button type = getUserInfo 回调后无需调用wx.login，直接提交供服务端处理。

第一种方案适合简单改造旧项目、快速开发，但强烈建议使用服务端处理方式解决。

完善用户信息时，解密用户信息部分请查看官方文档，这里不叙述具体流程https://developers./miniprogram/dev/framework/open-ability/signature.html

unionid 机制

另外，在登录流程中服务端向微信换取 sessionKey 过程中，如果满足一定条件，会直接返回 unionid 。同开发者账号下多个小程序时可用 unionid 做用户信息同步，无需再授权。提升用户体验。

unionid 机制:https://developers./miniprogram/dev/framework/open-ability/union-id.html

小程序初始化及页面初始化处理

在日常开发中，我们通常会把登录获取 token 操作放置在小程序初始化中即 app.js 定义的onLaunch中。而该生命周期与页面初始化生命周期为同步进行。

此时，如果在页面初始化中，需要携带用户登录态请求接口获取信息时，可能出现如下情况

因为小程序初始化及页面初始化是同步进行的。若页面初始化时，小程序初始化中登录请求仍未完成。会导致未携带 token 或其他鉴权信息，鉴权失败。

最开始我们通过在组件中挂载一个特殊事件componentDidInit，待小程序初始化登录请求后获取当前页面实例进行调用。但该方案对代码侵入性太强，最终我们选择维护一个登录请求队列。

用上队列的原因在于，在产品需求上经常会有先跳入首页，再从首页跳入二级页的需求，这样能让用户回退一次后，仍然能回到首页。但会导致在不同页面中近乎同时调用login方法。

在第一种方案中，解决该问题需要获得所有页面实例进行调用。而引入队列后只需要轮询消费队列中函数执行即可。上述流程可解决此问题。伪代码如下：

代码仅供理解思路

1letloginDoing=false;

2constloginEvent=[];

3

4constuserProfile=observable({

5user:{

6avatar:'',

7isCompleted:false,

8nickname:'',

9uid:0,

10token:'',

11},

12asyncloginProcess(){

13if(this.user.token){

14returnthis.user;

15}

16loginDoing=true;

17letcode;

18try{

19constcodeResult=awaitTaro.login();

20if(codeResult.errMsg!=='login:ok'){

21thrownewError('Taro.login失败');

22}

23code=codeResult.code;

24}catch(e){

25loginDoing=false;

26throwe;

27}

28constresult=awaitpost(URL().user.login,{

29code,

30});

31letuser={

32...result.user,

33token:result.token,

34};

35this.user=user;

36loginDoing=false;

37setTimeout(()=>{

38letlength=loginEvent.length;

39for(leti=0;i40loginEvent.pop()(user);

41}

42});

43returnuser;

44},

45login(){

46if(loginDoing){

47returnnewPromise((resolve)=>{

48loginEvent.push(resolve);

49});

50}else{

51returnthis.loginProcess()

52}

53},

54});

鉴权

业务需求中，通常存在某些操作需要【用户授权完善信息】后才能继续进行，早期项目中都是各自页面中写鉴权代码。因而会涉及大量重复代码，也不利于快速开发。为此我们封装了一套鉴权方案。

BasePage

通过所有页面基础一个基类 BasePage 。在 BasePage 中写入鉴权逻辑来实现。配合在主页面中使用 AuthorizationModal 组件实现鉴权。

代码仅供理解思路

1exportdefaultclassBasePageextendsComponent{

2

3state={

4//鉴权相关

5showAuthorizationModal:false,

6};

7

8/** 9*鉴权相关10*/

11//授权成功事件

12authSuccessEvent(){

13}

14

15//取消授权事件

16authFailEvent(){

17}

18

19asynccheckAuthorization(){

20//当前是否有已验证

21letglobalData=getGlobalData(STORAGE_KEY.VERIFY);

22if(globalData){

23return{

24isNew:false,

25};

26}else{

27Taro.showLoading({

28title:'检查授权中...',

29mask:true,

30showTicketModal:false,

31});

32//如果本地不存在时，先请求接口

33//未登录过，或新机器

34//请求token及授权状态

35letres;

36try{

37res=awaitTaro.login();

38}catch(){

39Toast.fail('登录失败~');

40Taro.hideLoading();

41thrownewError('Taro.login失败');

42}

43//请求授权接口

44constresult={};

45if(result.errno===0){

46resolve({

47isNew:false,

48});

49}else{

50//未授权过

51//弹窗提示授权

52this.setState({

53showAuthorizationModal:true,

54});

55this.authSuccessEvent=()=>{

56this.setState({

57showAuthorizationModal:false,

58});

59resolve({

60isNew:true,

61});

62};

63this.authFailEvent=()=>{

64this.setState({

65showAuthorizationModal:false,

66});

67reject();

68};

69}

70}

71}

72}

页面继承该基类

1classLaunchIndexextendsBasePage{}

在页面中置入组件

1{this.state.showAuthorizationModal&&

2<AuthorizationModalonSuccess={this.authSuccessEvent}onFail={this.authFailEvent}/>}3

AuthorizationModal 组件

接下来，我们只需要在需要鉴权的操作中如下使用即可

1this.checkAuthorization()

2.then((res)=>{

3//授权成功逻辑

4console.log('是否新用户',res.isNew);

5})

6.catch(()=>{

7//授权失败逻辑

8})

该方案好处在于，授权由状态驱动，只需在代码中调用 checkAuthorization 方法即可。

AuthorizationView

后来，由于第一种方案过于重，对页面代码侵入性较强。为此我们又封装了一套较轻的组件。

大部分逻辑中，需要用户主动点击时才进行鉴权，我们基于此思路封装了 AuthorizationView 。对外暴露 onAgree 、 onDeny 方法实现对部分区域的点击鉴权操作。

代码仅供理解思路

ponent{

2

3state={

4showLoginPanel:false,

5};

6

7/** 8*登录 9*/

10click(){

11const{userProfile:{user,},}=this.props;

12if(user.isCompleted){

13this.props.onAgree(user);

14}else{

15//显示登录框

16this.setState({

17showLoginPanel:true,

18});

19}

20}

21

22/**23*授权登录24*@parame25*/

26asyncbindGetUserInfo(e){

27if(e.detail.errMsg==='getUserInfo:ok'){

28const{userProfile,}=this.props;

29constuserResult=awaituserProfile.login(true);

30this.setState({

31showLoginPanel:false,

32});

33this.props.onAgree(userResult);

34}else{

35this.props.onDeny();

36}

37}

38

39cancel(){

40this.setState({

41showLoginPanel:false,

42});

43}

44

45render(){

46return(

47<Block>48<ViewonClick={this.click}>{this.props.children}View>49{50this.state.showLoginPanel&&<ViewclassName='login-panel'>51<ViewclassName='login-panel-main'>52<ViewclassName='login-panel-main-title'>您还未登录View>53<ViewclassName='login-panel-main-subtitle'>请先登录再进行操作View>54<ImageclassName='login-panel-main-image'src='https://p0./t01a1e495cc2be1e651.png'/>55<ViewclassName='login-panel-main-footer'>56<ViewclassName='login-panel-main-footer-buttoncancel'onClick={this.cancel.bind(this)}>暂不登录View>57<ButtonclassName='btn-reset'openType='getUserInfo'onGetUserInfo={this.bindGetUserInfo}>58<ViewclassName='login-panel-main-footer-buttonconfirm'>立即登录View>59Button>60View>61View>62View>63}64Block>65);66}67}6869AuthorizationView.defaultProps={70onAgree:()=>{71},72onDeny:()=>{73},74};7576exportdefaultAuthorizationView;77

代码中只需要使用该组件包裹子组件即可使用

1this.onAgree.bind(this)}onDeny={this.onDeny.bind(this)}>2<View>生成海报View>3</AuthorizationView>4

以上两种方案都有在线上业务中使用，具体选型看业务决定

优化及Bug追踪

在维护阶段，我们会更加关注于用户反馈 bug 时如何复现场景及数据分析。

日志收集

在小程序基础库版本 2.1.0 后，微信提供了一套日志相关接口：LogManager 。

在用户反馈时，通过该接口记录的日志会同步上传至微信后台，可下载查看追踪 Bug。

我们通过简单的对其封装，实现一套日志收集机制。

1const_logger=Taro.getLogManager({level:0,});

2

3constLogger={

4debug(...args){

5_logger.debug(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}?`,...args);

6console.debug(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}?`,...args);

7},

8info(...args){

9_logger.info(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}?`,...args);

10console.info(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}?`,...args);

11},

12warn(...args){

13_logger.warn(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}⚠️`,...args);

14console.warn(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}⚠️`,...args);

15},

16error(...args){

17_logger.warn(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}[Error]❌️`,...args);

18console.error(`${dayjs().format('YYYY-MM-DDHH:mm:ss')}[Error]❌️`,...args);

19},

20};

21

22exportdefaultLogger;

在使用时，最好按照一定规范进行使用，方便后续查找。例如

1Logger.error('[MyIndex]获取用户信息失败',e);

2Logger.debug('[LaunchIndex]initresponse',info);

实时日志分析：小程序基础库 2.7.1 之后还提供了实时日志分析功能。https://developers./miniprogram/dev/api/base/debug/wx.getRealtimeLogManager.html

数据分析

数据分析模型

在产品迭代过程中，我们一般会依照上面模型进行迭代。

数据获取 → 数据分析 → 数据应用 → 数据反馈

在小程序中，数据获取的方案主要有

小程序后台自定义分析

小程序本身提供的数据平台。

优点在于能随时不发版本添加数据打点位置。能满足大部分需求。

主要依靠产品后台自行添加数据打点项目。

第三方数据平台

这里以阿拉丁自定义数据分析为例。依靠第三方平台提供 API 进行打点。

阿拉丁

……

自有数据分析平台

一般大厂都会有自己自有数据分析平台，联系数据组拓展即可

推荐使用小程序后台自定义分析进行打点。各数据平台打点大同小异，能不发版本添加数据打点才是大杀器。

阿拉丁数据平台打点封装，代码仅供理解思路

1importTarofrom'@tarojs/taro';

2

3exportdefaultclassMonitor{

4staticsendEvent(moduleName,eventName,options){

5letaldstat=Taro.getApp().aldstat;

6if(aldstat){

7aldstat.sendEvent(`[${moduleName}]${eventName}`,options);

8}

9}

10}

11

12Monitor.sendEvent('LaunchIndex','返回',{

13id:this.state.id,

14});

15

16Monitor.sendEvent('LaunchIndex','点击制作',{

17id:this.state.id,

18});

小程序自定义分析API方式依葫芦画瓢封装即可。

需要注意的是封装时要有逻辑、有规则的封装，方便后面筛选具体页面具体操作。

常用优化方案

preLoad

在微信小程序中，页面路由跳转时 ( 例如调用wx.navigateTo、wx.redirectTo或wx.switchTab) ，到页面触发componentWillMount会有一定延时。因此一些网络请求可以提前到跳转前一刻请求。而后在触发componentWillMount后取得该请求实例。