微信小程序开发概述和开发与网页编程以及微信公众号编程

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发概述和开发与网页编程以及微信公众号编程

1. 微信小程序开发概述 1.1 微信小程序特点

微信小程序是微信平台提供的开放技术。 微信小程序服务于企业用户，用于打造移动“轻应用”。 该应用程序是一个不需要下载和安装的应用程序。 用户可以通过扫描或搜索来打开应用程序。 用户不必担心是否安装了太多应用程序，导致手机空间不足。 微信小程序推出后，与订阅号、服务号、企业号一起成为微信的企业应用系统。

在此插入图片描述

图1-1 微信公众平台产品类型 微信小程序运行在微信平台上，兼容不同的手机平台。 使用微信小程序开发应用不需要兼容多个平台。 开发完成后，可以直接运行在多个平台上，降低了应用开发的门槛。 针对传统H5应用的缺点，微信小程序对用户交互性能进行了大量的优化，使得微信小程序的应用在一些用户体验上接近App的水平。 微信小程序并没有采用网页编程中的HTML5+CSS3+组合。 微信小程序采用腾讯新定义的技术规范和架构。 不过，微信小程序的开发与网页编程、微信公众号编程非常相似。 对于前端开发来说，从Web开发迁移到微信小程序的开发成本并不高。 微信小程序吸收了主流前端开发中数据、样式、控制逻辑分离的理念，将每个页面分为四个文件：WXML文件、WXSS文件、JSON文件、JS文件。 JS文件采用标准语法规范进行逻辑运算。 JSON文件基于JSON语法规范，用于页面文件的配置。 WXML 文件基于 XML 语法规范，用于描述页面的可视组件。 WXSS继承了标准CSS语法，用于定义WXML组件样式。 在Web开发中，渲染线程和脚本线程是互斥的，但在微信小程序两者是分离的，运行在不同的线程中。 微信小程序的渲染层和逻辑层由两个线程管理：渲染层的界面进行渲染； 逻辑层使用线程来运行JS脚本。 一个小程序有多个接口，因此渲染层有多个线程。 这两个线程之间的通信会通过微信客户端进行中继，逻辑层发送的网络请求也会被转发。 小程序的通信模型如图所示。

在此插入图片描述

图1-2小程序通信模型 Web开发可以使用浏览器DOM API来操作DOM对象。 小程序的逻辑层和渲染层是分离的。 逻辑层运行在app中，没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。 这种差异导致一些前端库，如Zepto等无法在小程序中运行。 同时环境也不同，所以有些npm包无法在小程序中运行。 小程序每次冷启动时，都会检查是否有新版本需要更新。 如果发现新版本，则会将新版本的代码包下载到本地。 因此，小程序的页面加载是基于本地的，不需要频繁发送网络请求来获取页面文件，所有页面跳转也不需要与服务器交互。 这将大大提高小程序的执行效率，提供比使用H5 Web应用模式更好的用户体验，操作流畅度和响应速度会更好。 这也意味着微信小程序可以在没有网络连接的情况下使用。 结合本地存储，小程序可以满足网络暂时断线或者网络​​状况较差的场景需求，这是微信服务号和H5都无法实现的。

在此插入图片描述

图1-3小程序运营模型 微信小程序的出现为开发提供了新的应用开发框架。 即除了APP开发、H5开发（HTML5网页开发）、微信公众号开发之外，还可以选择使用微信小程序来实现移动应用。 接下来我们将微信小程序分别与APP和微信公众号进行对比微信小程序开发概述和开发与网页编程以及微信公众号编程，让大家了解微信小程序、APP和微信公众号各自的优缺点，以便大家在开发应用时做出合适的选择。

小程序和APP的区别

App，大多数情况下也称为APP，具有非常好的性能和体验、完整的组件支持、丰富的接口等特点。 但该App也存在一系列缺点，主要包括：

微信小程序和微信公众号

微信小程序和微信公众号（服务号）在功能上有一定的重叠，都可以用来实现面向企业的应用。 尤其是早期，微信只提供微信公众号，面向企业的应用基本都使用微信公众号。 完成。 微信公众号本质上是一个H5应用。 它具有传统H5应用的特点，例如每次刷新页面时都必须去服务器读取内容。 因此，微信公众号虽然也可以实现商业服务，但在用户体验方面与PP还有很大差距。 微信小程序的目标是提高应用程序的用户体验，使其接近APP的水平。 因此，微信小程序的出现，与微信公众号的定位有了明显的区别。 基本上，您可以根据以下标准做出选择：

1.2 微信小程序开发流程 1.2.1 注册小程序

开发微信小程序首先需要注册一个小程序账号。 注册成功后，登录微信小程序管理后台，完成小程序开发绑定和开发信息配置。 然后开发可以下载开发工具并使用开发工具进行小程序操作。 小程序已开发。 微信公众号需要单独注册和申请。 微信小程序可以单独注册申请，也可以通过微信公众号快速申请注册。 对于没有公众号和小程序商户微信应用小程序开发，正确的注册流程应该是先申请认证公众号，然后在公众号管理中的【小程序管理】页面快速申请小程序后端。 微信公众平台网址为：。 微信小程序注册需要邮箱地址作为账号。 小程序注册成功后，您可以使用邮箱地址+登录密码登录微信小程序管理后台。 为了方便开发开发和体验小程序的各项功能，开发可以申请小程序的测试帐号，并使用该帐号在开发工具中创建项目并进行开发测试以及预览和测试。真实设备上的体验。 小程序测试账号可以让开发免去繁琐的注册流程，降低小程序开发的初次使用门槛。 小程序测试号申请地址为：

1.2.2小程序开发配置

成功申请小程序开发账号后，您需要登录小程序管理后台设置小程序，填写小程序基本信息，如名称、头像、简介、服务范围等。 在【开发】->【开发管理】页面可以看到小程序的AppID。 小程序的AppID相当于小程序平台上的身份证，后面很多地方都会用到它。

在此插入图片描述

图1-4小程序设置页面

另外，在开发小程序之前，需要将开发的微信ID添加到微信小程序后台的项目成员中。 只有加入小程序项目成员的人才可以使用微信小程序开发工具进行小程序开发、调试、包上传等功能。 建议您将所有开发人员添加到项目成员中。 项目组其他非开发若想体验小程序功能，需要添加为体验成员。

在此插入图片描述

图1-5小程序会员管理

1.2.3 使用开发工具开发小程序

由于小程序采用渲染和逻辑分离的运行机制，这种方式与传统网页的运行机制不同，无法使用传统网页编程中的开发和调试工具。 为此，微信专门推出了新的小程序开发App。 一站式IDE：微信开发工具。 开发可以使用微信开发工具完成小程序代码开发、编译运行、界面和逻辑调试、实机预览和发布版本提交等功能。 您可以在小小程序开发文档中找到小程序开发工具的下载页面，或者直接输入以下网址进入小程序开发工具的下载页面：。 在小程序开发工具下载页面，根据您的操作系统下载对应的安装包并安装。 需要注意的是，小程序开发工具仅支持7及以上版本，以及Mac上的OS X 10.8及以上版本。 另外需要注意的是，微信小程序网页开发工具需要扫描二维码登录才可以使用，所以开发使用前必须进行绑定。 **次使用开发工具调试小程序时，会出现这样的错误：“不在合法域名列表中”。 这是因为 wx. 小程序中发起请求，但小程序管理后台尚未设置请求的域名。 到。 设置服务器域名，请进入小程序管理后台【开发】->【开发管理】->【开发设置】->【服务器域名】进行配置。 配置时请注意：域名仅支持https（wx.、wx.、wx.）和wss（wx.）协议。 域名不能使用IP地址（小程序的局域网IP除外）或者。

在此插入图片描述

图1-6小程序开发设置 为了降低开发门槛，开发工具提供了无需申请服务器域名即可编写和调试小程序选项。 点击微信开发工具中的【详情】->勾选【不验证合法域名】。 这样就可以使用wx. 功能正常发送网络请求。 但需要注意的是，这只是为了简化开发。 当小程序发布上线时，该方法不起作用。 这时就需要配置一个合法的域名。 如果在小程序中使用，引用了第三方页面，那么在运行调试小程序时会出现“找不到页面”的错误信息。 这时就需要配置业务域名。 由于微信小程序本身的限制，Web视图中无法直接跳转到H5页面。 Web视图下跳转H5页面需要先配置业务域名。

在此插入图片描述

图1-7 业务域名配置 业务域名必须是https协议，并且业务域名必须是ICP注册的。 配置企业域名时，需要下载验证文件，并将该文件放置在域名根目录下，并确保该文件可以访问。

1.2.4 审核与发布

小程序开发完成后，将代码提交给微信团队审核。 一旦获得批准，就可以发布。 详细的发布说明可以在以下章节中找到。

1.3 **小程序

打开微信小程序开发工具，扫描二维码登录，进入小程序项目管理界面：

在此插入图片描述

图1-8小程序项目管理界面 点击小程序项目管理界面中间的添加小程序指示区域，打开小程序新建项目界面：

在此插入图片描述

图1-9小程序新建项目界面 每个微信小程序都必须指定小程序的APPID。 小程序的APPID可以在小程序管理后台界面获取。 具体获取方法参见1.2.2章节。 在图1-9所示界面中选择小程序项目，输入小程序的项目名称，选择代码存放路径，填写在小程序管理后台获取到的APPID，勾选“请勿使用”云服务”，点击新建，您的**小程序项目就创建完成了。 当您使用微信小程序开发工具创建小程序项目时，微信小程序开发工具会生成一些演示代码。 这些预先生成的代码通常在实际开发过程中被删除。 为了快速了解微信小程序的结构，我们也删除了这些代码，从头构建了一个简单的小程序。 这个小程序只输出一行文本：Hello World。 首先在Demo项目根目录下创建app.json文件，内容如下。

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

复制

然后在Demo项目根目录下创建一个pages目录，在pages目录下新建一个index目录，然后在index目录下创建两个文件index.wxml和index.js。 index.wxml的内容是：

  
    {
  
  {motto}}
  

复制

index.js的内容是：

Page({ 
   
  data: { 
   
    motto: 'Hello World',
  },
  onLoad() { 
   
  }
})

复制

完成上述步骤后，开发工具的结构如下：

图1-10 演示工程结构

点击小程序开发工具的“编译”命令。 开发工具会编译demo工程的内容，并在微信开发工具的模拟器界面上显示Hello World结果：

图1-11 demo工程输出结果

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等