请选择 进入手机版 | 继续访问电脑版
查看: 1036|回复: 0

[达人分享] 【技术分享】-开发云台山小程序实录

[复制链接]
发表于 2020-4-15 18:30:05 | 显示全部楼层 |阅读模式
在一个阳光明媚的上午,我接到了领导布置的一个新任务----开发百度的云台山小程序。作为一名经验丰富,技术过硬,人见人爱的工程师,我愉快的投入到了开发百度小程序的调研中。

首先,开发百度小程序需要一些技术储备:
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中搜索【云台山】,就可以进入小程序了!!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|Archiver|Baidu Inc.

GMT+8, 2021-4-15 10:28 , Processed in 0.248016 second(s), 16 queries .

Powered by Discuz! X3.2

© 2001-2011 Comsenz Inc.

返回顶部