wx.getLocation: 用来获取用户位置经纬度的,项目里需要获取到实际的位置,比如城市名称,为了简化开发,我这里用了高德地图的微信小程序SDK,按照官方文档加入项目即可,注意对包体增量大小进行考量,现在是程序包体不能超过4M
第三方小程序组件的使用
1.目前发布上线的小程序功能有限,UI和UE设计的还有些瑕疵,暂时用到了WeUI
一些第三方js库如何使用
1 前端开发使用的一些第三方JS库,如果涉及到DOM和BOM操作,是不能直接拿来用的, 可以使用的库,建议用压缩后的js库,这样对包体体积增量会有所缓解; 这里项目使用的网页数据解析库改造自: https://github.com/Jxck/html2json ,来源于: https://github.com/icindy/wxParse; Github上有很多"轮子"可以用,时间不足的开发者,可以按需选用配合自己的创意,做出好用好玩的小程序!
使用第三方js库,有很多风险,开发者最好有相当的JS语言基础,还要学习一些ES6语法,这样在用第三方JS库才有一点的心里有数,后续也可以自己开发出供别人使用的“轮子”
推荐一本介绍JavaScript的书:
ES6新语法:
界面布局,样式和动画
这三块很大一部分都是前端开发的东西,可以直接拿过来用
看的网站资料: https://www.w3cschool.cn
css书籍是:CSS揭秘
小程序开发官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
项目使用总结:
这里的动画控制比较简单,主要是两个交互,第一个是点击今日要点下的某一条目,上方绿色进度条加载到完成后,标题列表视图渐渐从透明到不透明; 第二个是点击底部搜索框,输入文字后完成,当图灵小机器人有回复的时候,根据文字内容生成一个视图,从搜索框顶部向上伸缩弹出,动画代码都用CSS来写,定义在.wxss文件里,在触发时机通过数据绑定来修改这个视图的样式
主要代码如下
//默认样式 .reviewText { text-overflow: ellipsis; word-break: break-all; -moz-box-orient: vertical; overflow: hidden; /* //white-space: nowrap; */ max-height: 0; font-size: 14px; position:fixed; bottom:50px; left:0px; width:98%; height:auto; text-align: left; padding-top: 3px; padding-right:12px; padding-left: 3px; z-index:9999; } //弹出动画时候的样式 .displayReviewText { border-left: 7px solid #343338; background-color:burlywood; overflow: hidden; transition: max-height .55s; max-height: 2000px; } //文字自动隐藏时候的样式 .hideReviewText { overflow: hidden; transition: max-height .35s; background-color:transparent; /* transition: 0 .75s; */ max-height: 0px; } //文字自动隐藏时候的样式 .hideReviewTextColor { transition: background-color .35s; }