一.前写
1 .为什么要学习小程序开发?
对于前端开发来说,微信小程序因其简单快捷、开发成本低、用户流量巨大等特点,也成为前端开发工程师必备的技能。
2 .开发准备:
)1)有人开玩笑说因为可以玩vue小程序,所以不用学习:
微信程序虽然是腾讯自己做的,但核心思想和vue等框架一样哦~
)2)善于收集很棒的小部件:“我们不生产代码。 我们只是代码的搬运工。” 找到想要的组件,把他们巧妙地优雅地组装成大项目,也是程序员的基本技能。
具体怎么找到想要的小程序demo,在篇末推荐小程序的资源。 有很多大神的项目哦
把袖子卷起来晒干了
一.注册小程序帐户并下载IDE
1 .在官方网站上注册https://mp.weixin.qq.com/并下载IDE。
2 .官方文件总是最好的学习资料。
注意:
)1)注册账户后,有了appid。 创建新项目时需要填写。 否则,无法预览、无法上传代码等很多功能都无法使用。
)2)如果你注册过微信公众号,请注意。 微信公众号和微信小程序是两个账号,两者的APP PID也不同。 开发小程序时必须使用小程序的APP PID哦。
2 .小程序框架介绍和运行机制
1 .创建了“普通快速入门模板”,整个项目目录如下:
2.app.js
整个项目的启动文件,如注释输入的onlaunch方法具有三个功能,浏览器进行缓存输入和输出数据; 通过登录成功的回调获取用户信息。
globalData是定义整个项目的全局变量或常数哦。
3.app.json
整个项目的配置文件,包括注册页、选项卡页设置、整个项目的样式设置和页面标题
呃! 注意:小程序启动的默认第一页是app.json中pages的第一页。
4.pages
applet的页面组件(如果有几个页面)有几个子文件夹。 例如,快速启动模板时,有两个页面:索引和logs
打开索引目录
有三个文件,其实是与我们的web开发文件一一对应的。
index.wxml对应于index.html;
index.wxss对应于index.css;
index.js是js文件哦。
通常,您会将. json文件添加到每个页面组件中,并将页面标题等功能设置为该页面组件的配置文件
双击index.js文件
(1) var app=getApp );
引入整个项目的app.js文件,以获取期间的公共变量等信息。
如果要使用util.js工具库中的任何方法,可以通过在util.js中导出module.exports,然后在所需页面上进行require来获得。
)2)例如,获取豆瓣电影时,需要调用豆瓣的api。 首先,在app.js的gloabData中定义doubanBase
然后可以在index.js中使用app.globaData.doubanBase来检索此值。
当然,这些常量可以在需要页面时写入死值,但为了维护整个项目,建议将这些公共参数汇总到配置文件中。
)3)然后是page ) )中,第一个data是此页面组件的内部数据,并呈现在该页面的wxml文件中。 vue,和react很像哦~
用setData修改data数据,驱动页面渲染
)4)几个生命周期函数
例如,onload ()、on ready (on show )、on hide (on hide )等)。 拦截页面加载、页面首次呈现、页面显示、页面隐藏等
你可以多调查官方网站的API哦。 其中使用最多的是onload (方法和onShareAppMessage )方法(在设置页上共享的信息)
7 .使用7 .wxml模板。
例如,项目电影页以最小星级评估组件wxml为模板,从star到movie到movie-list用于一级嵌套。
在star-template.wxml页面中写入name属性; 然后在导入import的时候用name得到就可以了
8 .常用wxml标记
view、text、icon、swiper、block、scroll-view等这些选项卡直接查询官网文档
3 .小程序框架、每个页面和在线发布注意事项
一.整个框架的注意事项
)1)整个wxml页面中,底部的标签是哦。
)2)每页顶部导航栏的颜色,title位于此页的json中。 如果没有配置的话,取app.json的总配置哦。
(3) js
on中不能写注释哦,不然会报错的。(4)路由相关
1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效哦。
注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。
2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册哦,不然同样也是不能跳转的哦。
3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候哦。
(5)页面之间传递参数
参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id
(6)data-开头的自定义属性的使用
比如wxml中我们怎么写
点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;
注意: 大写会转换成小写,带_符号会转成驼峰形式
(7)事件对象event,event.target和event.currentTarget的区别:
target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。
比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,
这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)
(8)使用免费的网络接口:
本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档哦,很详细的
注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上哦
附上一个免费接口大全:
https://github.com/jokermonn/-Api
!!另外还要注意,要把这些接口的域名配置到小程序的合法域名中,不然也是访问不了的
(8)wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错哦。
把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的哦
2.切换城市页面:
(1)首页使用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返回来,天气信息还是旧的。
正确的处理逻辑如下:
1)使用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面哦。
2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。
3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的哦。
(2)城市列表的滚动和回到顶部
基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部
3.天气页
(1)初始化页面,天气显示的逻辑
首先调用小程序的wx.getLocation方法获得当前的经纬度,然后调用腾讯地图获得当前的城市名称和区县名称,并存到公共变量中,
再调用查询天气和空气质量的方法哦。
(2)容错处理
城市的名称长短不一,有点名字特别长,比如巴彦淖尔市这种,需要动态的获取完整的城市名称;
有些偏僻的城市暂时没有天气信息,我们需要对返回的结果进行判断,没有信息的需要给用户一个良好的提示信息。
4.周边-地图服务页面
(1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档
(2)点击时给被点中的图标加个边框,数据驱动视图,所以使用一个长度为3的数组保存三个图标当前是否被点中的状态
然后wxml再根据数据来动态添加class,增加边框样式
5.豆瓣电影页
(1)电影详情页的预览图片,用小程序本身的previewImage实现。
(2)详情页使用onReachBottom()方法,监控用户上拉触底事件,然后发送请求继续获得数据,实现懒加载的效果
(3)用户体验方面的优化,js中将整数评分比如7分统一改为7.0分,然后wxml模板再判断分数是否为0显示“暂无评分”
(4)搜索之后清空搜索框
因为小程序中不能使用getelementbyId这种方式获得元素,只能用数据来控制了
在data中加一个属性searchText来保存搜索框的内容并和 input的value属性绑定,搜索完成或者点击X时,searchText变量清空即可实现清空输入框的效果哦。
6.新闻页面
(1)聚合头条新闻的免费接口,只返回了新闻的基本信息,新闻的主体内容是没有的哦。
我找了好多新闻类的接口,好像都是没有新闻主体内容的。如果谁知道更好的接口欢迎留言告诉我哈~
(2)当然,也可以自己去爬新闻网站的数据哦
7.更多页面
(1)小程序目前开放外链的功能只是给公司组织的小程序开放了,个人开发还是不能使用外链的哦。
(2)彩蛋页面,获得用户信息
通过 wx.setStorageSync('userInfos', userInfos); 可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析
我这里只是存储到浏览器缓存中哦,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。
8.发布注意
(1) 新版本小程序发布的限制为2M,一般都是图片最占空间,所以尽量使用网络图片
具体怎么把本地图片变成网络图片,上面有讲哦。
(2)在开发者工具上预览测试没问题,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块--开发版本就有了内容。
(3)点击提交,填写小程序相关信息,就可以提交审核了哦。
注意:分类最好填写准确,这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的。