在一个阳光明媚的上午,我接到了领导布置的一个新任务----开发百度的云台山小程序。作为一名经验丰富,技术过硬,人见人爱的工程师,我愉快的投入到了开发百度小程序的调研中。

首先,开发百度小程序需要一些技术储备:

1. js,html,css

2. http协议 json数据

3. 熟练ui框架使用

4. 熟悉一种前端框架 vue或react

其次,开发前还有一些准备工作,比如需要在开发者平台先注册一个账号,下载最高版本的开发者工具,这里就不赘述了。

百度小程序借鉴了前端框架的实现原理,由于我比较熟悉react、vue这种框架,所以百度小程序的开发比较容易上手。小程序开发中使用到的组件和api,都可以在官网中看到文档说明:

默认图片

下面就进入了我具体的开发阶段:

1、首先向美女设计同学要来了原型图和ui设计图

2、根据原型,我规划好了路由页面,如下图

默认图片

3、接下来就是路由页面中按照ui图布局页面,相信html,css扎实的你们都没有问题,不在复述。

4、遇到第一个问题是导航路由需要带参数,但自带的导航配置并不可以配置有参数的路由。此时只能通自定义导航组件来实现。为了仍使用路由switchTab跳转,app.json中的导航配置并不删除,在onload回调函数中隐藏导航 swan.hideTabBar()。

自定义导航组件代码如下:

默认图片

默认图片

默认图片

 

自定义导航组件的引用如下:

默认图片

默认图片

5、地图插件的使用

默认图片

6、自定义事件的使用

拿到这个页面发现需要做左右划动,导航切换。touchStart 得到开始坐标点,touchEnd事件获得移动结束坐标点,比对点位置判断左右的滑动。代码如下:

默认图片

function getTouchData(endX, endY, startX, startY) {

    let turn = "";

    if (endX - startX > 50 && Math.abs(endY - startY) < 50) {      //右滑

        turn = "right";

    } else if (endX - startX < -50 && Math.abs(endY - startY) < 50) {   //左滑

        turn = "left";

    }

    return turn;

}

touchStart(e) {

        this.setData({

            "touch_x": e.changedTouches[0].clientX,

            "touch_y": e.changedTouches[0].clientY

        });

},

    touchEnd(e) {

        let x = e.changedTouches[0].clientX;

        let y = e.changedTouches[0].clientY;

        if (getTouchData(x, y, this.data.touch_x, this.data.touch_y) == "left") {

        }

        if (getTouchData(x, y, this.data.touch_x, this.data.touch_y) == "right") {

        }

    }

7、scroll-view组件的使用

红色区域内容因为不能用page的滚动条,首先想到用view的overflow-y: auto来做滚动,但测试发现真机兼容性非常差 。还是用小程序提供的scroll-view最为合适。代码如下:

默认图片

默认图片

 

8、开发测试时,手机端小程序是有缓存的,一定首先清除缓存再扫码测试,这点真的很重要。

 

最后,终于到了收获的季节!经过我一顿开发后,终于可以上线了~不过还有几点需要注意:

1、上线前确定组件支持到的版本库,尽量选高些的版本库

2、小程序性能记得优化一下,减少请求数据大小。主页尽量控制1m以内,单个图片最好50k以内,最高不超过100k。减少请求数量,减少本地图片。

上线审核时间约1天以内。代码正常。一天就可以正试上线了!!!

锵锵锵~~这就是我们的小程序,可以从手机百度app中搜索【云台山】,就可以进入小程序了!!