如何快速开发一个小程序

本文小编为大家详细介绍“如何快速开发一个小程序”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何快速开发一个小程序”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　注册小程序账号，下载IDE

　　官方文档一向都是最好的学习资料。

　　注意：

　　(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)一些生命周期函数

　　比如onload()， onready(), onshow(), onhide()等等，监听页面加载、页面初次渲染、页面显示、页面隐藏等等

　　更多的可以查官网API。其中用的最多的就是onload()方法，和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之中，然后另一个页面在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替换上

读到这里，这篇“如何快速开发一个小程序”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。