小程序如何开发

一.注册小程序账号，下载IDE
1.官网注册https://mp.weixin.qq.com/，并下载IDE。
2.官方文档一向都是较好的学习资料。
留意：
（1）注册账号之后会有一个appid，新建项目的时分需求填上，否则很多功用是用不了的，比方不能预览，不能上传代码等等。
（2）假如你注册过微信大众号话，必定要留意，微信大众号和微信小程序是两个账号，二者的appid也是不同，小程序开发必须运用小程序的appid哦。
二.小程序结构介绍和运行机制
1.咱们建立了“普通快速发动模板”，然后整个项目目录如下：
2.app.js
整个项目的发动文件，如注释写的onlaunch办法有三大功用，浏览器缓存进行存和取数据；用登陆成功的回调；获取用户信息。
globalData是界说整个项目的大局变量或许常量哦。
3.app.json
整个项目的装备文件，比方注册页面，装备tab页，设置整个项目的款式，页面标题等等；
！留意：小程序发动默认的为数不多个页面，便是app.json的pages中的为数不多个页面哦。
4.pages
小程序的页面组件，有几个页面就会有几个子文件夹。比方快速发动模板，就有两个页面，index和logs
5.翻开index目录
能够看到有三个文件，其实和咱们web开发的文件是一一对应的。
index.wxml对应index.html；
index.wxss对应index.css；
index.js便是js文件哦。
一般咱们还会给每个页面组件添加一个.json文件，作为该页面组件的装备文件，设置页面标题等功用
6.双击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）一些生命周期函数
比方()， onready(), onshow(), onhide()等等，监听页面加载、页面初度烘托、页面显示、页面躲藏等等
更多的能够查官网API哦。其中用的多的便是()办法，和onShareAppMessage()办法（设置页面分享的信息）
7 .wxml模板的运用。
比方本项目电影页面，便是以小的星级点评组件wxml作为模板，star到movie到movie-list，一级一级的嵌套运用。
star-template.wxml页面写好name特点；然后import引入的时分经过name取得即可
8.常用的wxml标签
view，text，icon，swiper，block，scroll-view等等，这些标签直接查官网文档即可
三.小程序结构、各个页面以及发布上线的留意点
1.整个结构中的一些留意点
（1）整个wxml页面，比较底层的标签是哦。
（2） 每个页面顶部栏的颜色，title在本页面的json中装备，假如没有装备的话，取app.json中的总装备哦。
（3）json中不能写注释哦，否则会报错的。
（4）路由相关
1）运用wx.SwitchTab跳转tab页的话，在app.json中除了注册pages页面，还需求在tabBar中注册tab页，才干收效哦。
留意：tab多5个，也便是咱们说的头部或许底部多5个菜单。其他的页面只能经过其他路由办法翻开哦。
2）navigateTo是跳到某个非tab页，比方欢迎页，电影详情页，城市选择页；在app.json中注册后，不能在tabBar里注册哦，否则相同也是不能跳转的哦。
3）reLaunch跳转，新开的页面左上角是没有退回按钮的，本项目只用了一次，切换城市的时分哦。
（5）页面之间传递参数
参数写在跳转的url之中，然后另一个页面在办法中的传参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）点击提交，填写小程序相关信息，就能够提交审阅了哦。
留意：分类较好填写精确，这样才干更快的经过审阅哦。我这个小程序一天半时间过审上线的。