首页手记投稿004期 |在微信小程序开发中拾起的美丽贝壳

投稿004期 |在微信小程序开发中拾起的美丽贝壳

标签：

深度学习

算一算来深圳已经快两年了,想想当初来深圳时怀揣的梦想,用一个笑哭的表情来表达最为贴切.从最初的前端切图仔,到react,再到小程序开发,一路都感觉知识在一点点增长,这些增长的知识在我看来都是美丽的贝壳.

在小程序开发中,知识增长历程有让我哭笑不得的,也有让我对一些前端大神顶礼膜拜的.下面举例说明一下:

(1)小程序样式方面:

换行

这真的是一个让人哭笑不得的经历:

请看下面这个实例,就是因为在<text>标签中书写时习惯性换行了,导致左边的样式小计数量换行

我在wxss文件里又是找宽度的问题,又是找行高的问题,又是找定位的问题,怎么都想不明白,突然脑袋想到曾经遇到奇怪现象,把换行去掉换成下面的样子,一切问题就都解决了;

记得这个奇怪的现象在HTML里面是,当一行元素中有图片的时候,你在源代码中输入换行会导致有缝隙

(2)链接跳转:

在小程序中有自带的地步导航栏模板,只要在app.json文件中向下面这样配置好就行了

但是,如果页面是底部导航中的页面,在其他页面想跳转到这个页面时,再使用<navigator>就要添加open-type="switchTab",或者用时间处理函数wx.switchTab,但是这两种方法都不能传递参数,是不是很气人?

不过在小程序中数据可以共享,在app.js中定义的公共数据是可以被所有页面引用的,同时也可以在这些页面中随时修改公共数据的值.

当使用wx.navigateTo方法跳转时,保留当前页面，跳转到应用内的某个页面,但是最多打开只能打开5个页面，之后按钮在想打开新的页面就没有响应了.

当使用wx.redirectTo方法跳转时,会关闭当前页面，跳转到应用内的某个页面,但是这个跳转也有个坑，就是跳转页面后页面会闪烁一下，完全影响了用户的操作体验，是不是很缺德了?

当使用wx.reLaunch,会跳转到指定页面并关闭其他打开的所有页面,这个可以用在返回首页的时候.

(3)表单地址选择

这个是让前端同胞比较轻松的一个知识点,在之前的用户输入地址时,都是需要,我们自己去获得全国的地址省市区县这些列表数据,再做相应的二级联动处理,现在,小程序中方便了许多,

js文件:

wxml文件:

只要这样表单中就可以提交上相应的数据了,简单方便.

(4)自定义组件中引用图标字体

在小程序中的插件和之前的react中差不多,传递数据,配置相应的json文件,就好了,但是当我们在组件中使用阿里图标字体时,发现这个时候app.wxss完全不去作用了,我们需要在组件wxss中重新引入阿里图标字体的链接,并把需要使用到的图标的编码重新添加到插件wxss中.

(5)wxParse

在小程序的开发过程中有时候会用到一些上传的文件代码,这个时候直接用到wxml中肯定是不行的,因为微信小程序中的块级元素就是<view>,行内元素就是<text>,图片是<image>,没有<p>,<div>,<img>,<span>...这些

这个时候就可以使用wxParse来解析,下面介绍一下步骤:

首先我们在github上下载wxParse:https://github.com/icindy/wxParse

1.引入wxss

@import "../wxParse/wxParse.wxss";

2.引入wxml

<import class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../wxParse/wxParse.wxml"/>
<view class="wxParse">        \
    <template is="wxParse" data="{{wxParseData:article_content.nodes}}"/>
</view>

3.引入js并加载数据

var WxParse = require('../wxParse/wxParse.js');
onLoad: function () {    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {            
            'id':13
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) { 
            var article = res.data[0].post;
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }

4.在页面中引用模板

<import class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

在小程序开发中还有很多的,趣事,不不断增长的知识,让我们拾起一个个贝壳,不断积累,说不定将来的某一天拿出来可以摆出一件漂亮的蓝图呢!

下面是我和我的团队一起开发的小程序,扫码,可以进入里面看看,有什么不合理之处,还请各位多多指教.