如何开发微信小程序？快速开发一个小程序教程

注册小程序帐户，下载IDE

注册https://mp.weixin.qq.com/并下载IDE。

官方文件一直是最好的学习资料。

注意：

（1）注册帐户后会有appid。您需要填写新项目，否则不会使用许多功能，例如不预览，不上传代码等。

（2）如果你注册了微信公共号，你必须注意微信公共号和小程序是两个帐号，两者的appid不同，小程序开发必须使用小程序 appid。

小程序框架介绍和操作机制

1.我们创建了“普通快速汇海模板”，然后整个项目目录如下：

2.app.js

整个项目的汇海文件，例如注释编写的onlaunch方法，有三个功能：浏览器缓存数据用于存储和获取;成功登录的回调;和用户信息。

globalData是定义整个项目的全局变量或常量。

3.app.json

整个项目的配置文件，如注册页面，配置标签页，设置整个项目的样式，页面标题等;

注意：默认的第一页小程序汇海是app.json页面中的第一页。

4.pages

小程序页面组件，有几个页面有几个子文件夹。例如，快速汇海模板有两个页面，索引和日志

5.打开索引目录

您可以看到有三个文件，实际上是我们在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中，然后在所需页面中获取它。

（2）例如，当我们想要一个豆瓣电影时，我们需要打电话给豆瓣api;我们首先在app.js

然后在index.js中使用app.globaData.doubanBase来获取此值。

当然，这些常量也可以用于在页面需要时写入死值，但是为了维护整个项目，建议在配置文件中编写这个通用参数。

（3）接下来在整个页面（{}）中，第一个数据，即该页面组件的内部数据，将被渲染到页面的wxml文件中，类似于vue，react~

通过setData修改数据数据以驱动页面呈现

（4）一些生命周期功能

如onload（），onready（），onshow（），onhide（）等，监控页面加载，页面初始渲染，页面显示，页面隐藏等。

更多可以查看官方网站API。最常用的是onload（）方法和onShareAppMessage（）方法（设置页面共享的信息）

7.使用.wxml模板。

例如，该项目的电影页面是使用最小星级评分组件wxml作为模板，星形到电影到电影列表，并在第一级使用它。

star-template.wxml页面写入name属性;然后导入是通过名称获得的。

8.常用的wxml标签

查看，文本，图标，swiper，块，滚动视图等。这些标签可以直接检查官方网站文档

小程序框架，单个页面和发布行上的注释

1.整个框架中的一些关注点

（1）wxml页面的整个底部，标签是。

（2）每页顶部导航栏的颜色，标题在此页面的json中配置，如果未配置，请在app.json中进行总配置。

（3）你不能在json中写评论，否则你会收到错误。

（4）路由相关

1）如果使用wx.SwitchTab跳转到标签页，除了在app.json中注册页面页面外，还需要在tabBar中注册标签页才能生效。

注意：最多有5个选项卡，这是头部或底部最多5个菜单。其他页面只能通过其他路由方法打开。

2）navigateTo是跳转到非标签页面，如欢迎页面，电影详情页面，城市选择页面;在app.json中注册后，您无法在tabBar中注册，否则无法跳转。

3）重新启动跳转，新打开页面的左上角没有返回按钮，此项目仅在切换城市时使用一次。

（5）在页面之间传递参数

该参数写在跳转的url中，然后在onload方法的pass方法中接收另一个页面。通过并获取如下ID：

（6）在数据开头使用自定义属性 -

例如，我们如何写wxml

点击的事件对象可以这样使用，var postId=event.currentTarget.dataset.postid;

注意：大写将转换为小写，_符号转换为驼峰形式

（7）事件对象事件，event.target和event.currentTarget：

Target指的是当前被单击的组件，currentTarget指的是事件捕获的组件。

例如，旋转木马组件，click事件应绑定到swiper，以监控是否点击了任何图像，

此时目标指的是图像（因为点击是图像），而currentTarget指的是swiper（因为绑定点击事件在swiper上）

（8）使用免费的网络界面：

本项目采用风天气api，腾讯地图api，百度地图api，豆瓣电影api，汇总标题新闻api等具体用法可以在官方网站的界面文件中看到，非常详细

注意：免费界面有访问限制，因此如果您将此界面与其他人的组件一起使用，最好使用新的密钥替换注册自己

附上大全的免费界面：

https://github.com/jokermonn/-Api

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。