Development preparation:
( 1) Some people joked that you don't need to learn Vue applet at all:
Although the WeChat applet was created by Tencent itself, the core idea is the same as that of Vue and other frameworks~
( 2) Be good at collecting beautiful small components: "We don't produce code, we are just code porters ", being good at finding the components you want and assembling them into a large project skillfully and elegantly is also a basic skill for programmers .
How to find the desired applet demo? At the end of the article, I will recommend the resources of the applet. There are many great projects.
Roll up your sleeves and get dry
1. Register a Mini Program account and download the IDE
1. Register on the official website https://mp.weixin.qq.com/ and download the IDE.
2. Official documents have always been the best learning materials.
Notice:
(1) After registering an account, there will be an appid, which needs to be filled in when creating a new project, otherwise many functions will not be available, such as no preview, no code upload, and so on.
(2) If you have registered a WeChat official account, you must pay attention that the WeChat official account and the applet are two accounts, and the appid of the two is also different. The appid of the applet must be used for the development of the applet.
2. Introduction to the applet framework and operation mechanism
1. We have established a "Normal Quick Start Template", and then the entire project directory is as follows:
2.app.js
The startup file of the entire project, such as the onlaunch method written in the comments, has three functions, the browser caches to access and retrieve data; use the callback for successful login; obtain user information.
globalData is a global variable or constant that defines the entire project.
3.app.json
Configuration files of the entire project, such as registration page, configuration tab page, setting the style of the entire project, page title, etc.;
! Note: The first page that the applet starts by default is the first page in the pages of app.json.
4.pages
The page component of the applet, there will be several subfolders if there are several pages. For example, the quick start template has two pages, index and logs
5. Open the index directory
You can see that there are three files, which actually correspond one-to-one with the files developed by our web.
index.wxml corresponds to index.html;
index.wxss corresponds to index.css;
index.js is the js file.
Generally, we will also add a .json file to each page component as the configuration file of the page component, setting the page title and other functions
6. Double-click the index.js file
（1） var app = getApp ();
Introduce the app.js file of the entire project to retrieve information such as public variables in the period.
If you want to use a method in the util.js tool library, export it in module.exports in util.js, and then require it in the required page to get it.
(2) For example, when we want to get Douban movies, we need to call Douban's api; we first define doubanBase in globData in app.js
Then use app.globaData.doubanBase in index.js to get this value.
Of course, you can also use hard-coded values for these constants when the page needs them, but for the maintenance of the entire project, it is recommended to write such common parameters in the configuration file uniformly.
(3) Next, in the entire page({}), the first data, which is the internal data of the page component, will be rendered into the wxml file of the page, similar to vue and react~
Modify data data through setData to drive page rendering
(4) Some life cycle functions
For example, onload(), onready(), onshow(), onhide(), etc., monitor page loading, page initial rendering, page display, page hiding, etc.
For more information, you can check the official website API. The most used ones are the onload() method and the onShareAppMessage() method (to set the information shared by the page)
7. The use of .wxml templates.
For example, the movie page of this project uses the smallest star rating component wxml as a template, from star to movie to movie-list, nested one by one.
Write the name attribute on the star-template.wxml page; then you can get it by name when importing
8. Commonly used wxml tags
view, text, icon, swiper, block, scroll-view, etc. These tags can directly check the official website documentation
3. The framework of the applet, each page, and the points for attention when publishing and launching
1.整个框架中的一些注意点
（1）整个wxml页面，最底层的标签是<page></page>哦。
（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之中，然后另一个页面在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）点击提交，填写小程序相关信息，就可以提交审核了哦。
注意：分类最好填写准确，这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的
至此，我就把两天开发内碰到的坑和注意点都过了一遍，据说还有更多的坑，等之后更深入的开发再继续研究咯。
四.写在最后
1.推荐几个小程序开发的资料
（1）知乎一篇小程序的资料：
https://www.zhihu.com/question/50907897
（2）小程序社区
http://www.wxapp-union.com/portal.php
（3）极乐小程序商店
http://store.dreawer.com/
2.本项目的github地址，喜欢的童鞋点个star哈~
您可能感兴趣的：
原文链接：https://www.cnblogs.com/xuanbiyijue/p/7980010.html