Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

微信小程序怎么开发 微信小程序开发教程文档

2021年10月10日10810百度已收录

【微信小程序是什么】

微信“小程序”可以为开发者提供基于微信的表单、导航、地图、媒体和位置等开发组件,让他们在微信的网页里构建一个HTML 5应用。同时微信还开放了登录和微信支付等接口,让这个“小程序”可以和用户的微信账号打通。

根据参与本次内测的“小道消息”创始人Fenng提供的信息,微信小程序向开发者开放了下列API接口:

视图容器:视图(View)、滚动视图、Swiper基础内容:图标、文本、进度条表单组件:按钮、表单等等操作反馈导航媒体组建:音频、图片、视频。地图画布文件操作能力网络:上传下载能力、WebSocket数据:数据缓存能力位置:获取位置、查看位置设备:网络状态、系统信息、重力感应、罗盘界面:设置导航条、导航、动画、绘图等等开放接口:登录,包括签名加密,用户信息、微信支付、模板消息

虽然微信小程序本质上来说就是一个HTML 5(移动网页)应用,但与那些经常在朋友圈刷屏的 H5 小游戏或者应用不同的是,微信小程序获得更多的系统权限。首先是数据缓存能力,这可以让用户在打开一个小程序的时候将程序的主要框架缓存到微信上,下一次就可以快速打开了。微信创始人张小龙曾说过,微信应用号希望实现的目标是“用完即走,无需安装和卸载”,也就是说以后当你要使用一个应用时,只需要在微信里搜索就可以直接使用了。

本开发教程文档将带你一步步创建完成一个微信小程序,并可以在手机上查看微信小程序的实际效果,让你大家知道微信小程序是怎么开发的。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志与相关信息。

【微信小程序开发教程文档】

1. 获取微信小程序的AppID

开发者登录微信公众平台,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的AppID了,注意不可直接使用服务号或订阅号的AppID。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第1张

注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作“绑定开发者”。即在“用户身份”-“开发者”模块,绑定上需要体验该小程序的微信号。本开发教程默认注册帐号、体验都是使用管理员微信号。

2. 创建程序项目

我们需要通过微信WEB开发者工具,来完成微信小程序创建和代码编辑。

开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的AppID,设置一个本地项目的名称(非小程序名称),比如“这是我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

为方便开发的初学者了解微信小程序的基本代码架构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具就会提示,是否需要创建一个Quick Start项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个非常简单的Demo。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第2张

新项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。这些对于开发者来说是最熟悉不过的啦!

3. 编写代码

点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的文件,包括app.js、app.json、app.wxss共三个文件。其中,后缀名是.js的是脚本文件。后缀名是.json的是配置文件,后缀名是.wxss的是样式表文件。微信小程序调试时会读取这些文件,并生成小程序实例。下面为分别介绍它们的功能,让大家更好修改自己的微信小程序!

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的API,如本例的同步存储及同步读取本地数据。想了解更多微信可用API,可参考API文档

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第3张

app.json是对整个小程序的全局配置文件。我们可以在这个文件中配置微信小程序是由哪些页面所组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题等。注意该文件不可添加任何注释。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第4张

app.wxss是整个微信小程序的公共样式表。我们可以在页面组件的Class属性上直接使用app.wxss中声明的样式规则,类似.CSS的效果!

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第5张

创建基础页面

在这一步教程中,我们有两个页面,Index页面和logs页面,即欢迎主页和小程序启动日志的显示页面,它们都在Pages目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在app.json的Pages中,且Pages中的第一个页面是微信小程序的欢迎首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。后缀名是.js的是脚本文件。后缀名是.json的是配置文件,后缀名是.wxss的是样式表文件,后缀名是.wxml的是页面结构文件。

index.wxml 是页面的结构文件:

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第6张

本例中使用了、、来搭建页面结构,绑定数据和交互处理函数。

index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第7张

index.wxss 是页面的样式表:

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第8张

页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

index.json 是页面的配置文件:

页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖app.json 的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。

logs页面结构

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第9张

logs页面使用控制标签来组织代码,在上述案例中使用wx:for绑定logs数据,并将logs数据循环展开节点。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第10张

程序运行结果如下:

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第11张

4. 手机模拟运行预览

开发者工具左侧菜单栏选择"项目",点击"预览",扫码后即可在微信客户端中体验。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第12张

【怎么体验微信小程序】

下载微信客户端版本号:6.3.27 及以上,只有小程序绑定的开发者有权限扫码体验。

微信小程序怎么开发 微信小程序开发教程文档  微信小程序开发教程 第13张

评论列表暂无评论
发表评论
微信