企业资讯
首页 > 资讯中心 > 企业资讯 > 微信官方Demo快速搭建小程序,如何做服务端配置

微信官方Demo快速搭建小程序,如何做服务端配置

发布时间:2021-03-17    来源:广州网站优化公司     浏览次数:

在上一教程中,我们教会了您如何使用官方的WeChat演示快速创建小相册,并学习了如何安装开发人员工具,如何创建小程序以及如何进行服务器配置。并使用腾讯云COS来实现相册的上传和下载功能。

在本教程中,我们将教您快速入门小程序开发,以不同级别的Hello World为例,了解小程序基本配置,学习小程序总体开发框架,最后完成开发释放过程。

Hello World入门

在第一阶段,我们不需要了解小程序的历史和技术细节,只需按照我们来完成基本的Hello World示例。

第一步

请参考上一教程,下载微信开发人员工具,然后根据您所使用的操作系统进行安装。

第二步

打开微信开发人员工具,然后选择新建小程序项目。我们不需要先了解AppID的概念。创建新项目时选择或使用测试编号:小程序系统将为您分配一个测试帐户,并取消选中“创建普通的快速入门模板”选项,然后单击“确定”,如图所示。

15

第三步

在根目录中创建app.json,然后填写以下代码。

{
  "pages": ["pages/index/index"]
}

77

在根目录下创建一个页面目录,然后在页面目录下创建一个索引目录,然后在索引目录下创建index.wxml,然后填写以下代码。

Hello World

62

然后单击菜单栏中的保存按钮,系统将自动创建index.js,index.json,index.wxss和其他目录文件,并将其编译,最后我们将看到小程序已显示我们编写的Hello World文件的代码。

52

恭喜,您已经成功开发出第一个小程序!此时,您正在尝试在index.wxml中修改hello世界,然后将其保存以查看会发生什么情况?

09

Hello World- 小程序代码组成

在进行高级实验之前,让我们在上一步中讨论小程序的历史以及配置文件的含义。

历史

从技术的角度来看,小程序不是凭空浮出水面的概念。 2015年初,微信发布了一套完整的Web开发工具包JS-SDK,它打开了许多API,例如拍摄,语音识别和QR码。它为所有Web开发人员打开了一个崭新的窗口,因此所有开发人员都可以使用微信的本机功能来完成以前无法完成或难以完成的事情。

但是,在内部测试中,微信团队发现某些复杂的页面存在白屏问题。例如,页面加载了许多CSS或JavaScript文件。这些文件的执行时间占用了很多UI线程,除了白屏。 ,影响Web体验和操作反馈不足的问题主要表现在页面切换的钝性和单击的呆滞性。微信面临的问题是如何设计一个更好的系统,以便所有开发人员都能获得更好的微信体验。微信团队需要一个快速加载,更强大的功能,本机体验,易于使用和安全的微信数据公开,高效且简单的开发系统,该系统需要在本文中进行详细介绍小程序。

配置文件的含义

在上一步中,我们创建了一个app.json文件和一个index.wxml文件。系统还为我们创建了index.js,index.json,index.wxss和其他目录文件。接下来,我将向您解释文件的作用。为了更直观地显示。让我们以Hello world为例。

第一步json文件

立即打开开发工具编辑器,然后在根目录中找到app.json文件,双击以打开代码,然后将其替换为以下代码。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

上一篇:pipelinewxml和wxss当我们修改完WXML、WXSS的时候

下一篇:2020日活达4亿的小程序商业化表现如何?

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x