北京华网天下

小程序与普通网页有什么不同开发模式不一样

2023-08-12

来源：网络整理

小程序和普通网页有什么区别

api不一样

不同的发展模式

1. 小程序注册流程

参考网站：微信公众平台

单击注册按钮

使用浏览器打开微信公众平台网站，点击右上角“立即注册”，进入小程序开发账号注册流程

选择要注册的账户类型

填写账户信息

邮件激活

点击链接激活账户

选择主题类型

主题注册信息

2.注册后获取小程序

相当于微信中小程序的“身份证”。有了它，微信客户端就可以确定小程序的“身份”，并使用微信提供的高级接口

3.微信开发者工具

下载并安装微信开发者工具

为什么使用微信开发者工具

扫描二维码登录微信开发者工具

设置外观和代理

为什么需要代理设置？

演示创建新小程序的步骤

4、小程序项目的组成 4.1 小程序目录的组成用于存放小程序的所有页面，存放工具类模块（例如：格式化时间的自定义模块） app.js 小程序的入口文件 -- - main..json 小程序项目的全局配置文件 app.wxss 小程序项目的全局样式文件 ..json .json 的配置文件用于配置小程序及其要索引的页面通过微信——SEO——搜索引擎优化

4.2 小程序页面的组成 4.3 了解小程序中的四个配置文件

JSON 是一种数据格式。在实际开发过程中，JSON总是以配置文件的形式出现。项目也不例外。通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。小程序项目中有4个json文件，分别是：

项目根目录下的app.json配置文件

项目根目录下的..json配置文件

项目根目录下的.json配置文件

每个页面文件夹中的.json配置文件

4.3.1 app.json文件

app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面风格、底部选项卡等。 Demo项目中app.json配置内容如下：

简单了解一下这四个配置项的作用：

用于记录当前小程序所有页面的路径

全局定义小程序所有页面的背景和文件颜色

全局定义小程序组件使用的样式版本

：用于表示.json的位置

4.3.2 ..json 文件

..json是项目配置文件，用于记录我们对小程序开发工具所做的个性化配置，例如：

项目名中保存了编译相关的配置，项目名中保存了小程序的账户ID。

注意搜索提示已关闭

4.3.3 .json 文件

微信现在已经在小程序内开放了搜索，效果类似于PC网页的SEO（搜索引擎优化），.json用于配置小程序页面是否允许微信搜索。

当开发者允许微信搜索时，微信会使用爬虫来索引小程序的页面内容。当用户的搜索关键词与页面索引成功匹配时，小程序的页面就可以显示在搜索结果中。

注意：默认情况下启用索引提示。如果需要关闭索引提示，可以在小程序项目配置文件..json中将该字段配置为

4.3.4 页面的.json配置文件

对于小程序中的每个页面，都可以使用.json文件来配置该页面的窗口外观，页面中的配置项会覆盖app.json中的配置项

4.4 新建小程序页面

在文件中右键新建文件夹--home，在home文件夹中右键新建文件夹--回车

在app.json中添加页面的存储路径-->，小程序开发者工具可以帮我们自动创建对应的页面文件

目录下页面的删除或添加需要在app.json文件的数组中添加或删除

4.5 设置主页的两种方式调整 app.json --> 数组中页面路径的顺序，可以修改项目的主页，小程序将渲染排名第一的页面作为项目主页

在app.json同级，配置一个新的node节点，传入需要设置为首页的路径

4.6 小程序开发和网页开发有什么区别 4.6.1 WXML 的概念以及它与 HTML 的区别

什么是 WXML

WXML（）是框架设计的一组标签语言（组件），用于构建小程序页面的结构，其功能类似于Web开发中的HTML

WXML 和 HTML 之间的区别

不同的属性节点

提供类似于Vue中的模板语法

4.6.2 wXSS的概念以及它与CSS的区别

什么是WXSS

WXSS 和 CSS 之间的区别

提供全局样式和局部样式

WXSS仅支持部分CSS选择器

4.6.3 小程序中JS文件的三类

一个项目仅仅提供页面展示是不够的。在小程序中，我们通过.js文件处理用户操作，比如响应用户点击、获取用户位置等。

小程序中的JS文件分为三种类型，分别是：

应用程序.js

App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) }, globalData: { userInfo: null } }) 复制代码