微信小程序如何制作(如何建立微信小程序)

高展网为您带来《微信小程序如何制作(如何建立微信小程序)》，本文围绕微信小程序如何制作展开分析，讲述了关于微信小程序如何制作相关的内容，希望您能在本文中获取到有价值的信息！

　　微信里面app，16年推出

　　竞品：支付宝小程序，钉钉，美团，头条，抖音qq小程序

　　优点

　　1，在微信里面自由分享，2，不用下载app，3,能快速的开发，使用微信的api接口

　　开发者

　　内存，源码，图片，存储，接口与数据都有限制

　　如果你还没有微信公众平台的账号，请先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，我们选择 “小程序” 即可。

　　接着填写账号信息，需要注意的是，填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱，而且每个邮箱仅能申请一个小程序。

　　激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

　　下载微信web开发者工具，根据自己的操作系统下载对应的安装包进行安装即可。

　　pages 注册页面

　　window 窗口信息

　　在pages文件夹右键建立新的文件夹在文件中右键新建页面哪个page在最上面，默认显示哪页json要求严格语法，不能有多余的注释和逗号

　　这样新的页面就建好了我们来看看都有什么

　　ceshi.wxml 模板文件

　　ceshi.js 业务逻辑

　　ceshi.wxss 样式

　　ceshi.json 页面配置

　　把新建的文件路径调到最上面那就是主页了，意思就是，第一个路径就是首页的路径!

　　页面配置：

　　小程序的模板语法约等于vue的模板语法

　　（不常用）

　　import

　　只能导入template内容

　　template/utils.wxml

　　用户名：{{name}}

　　home.wxml

　　include

　　只能导入非template内容

　　template/foot.wxml {{内容}}

　　home.wxml

　　显示提示

　　showToast

　　本地存储

　　wx.setStorageSync(key,value)

　　本地取

　　wx.getStorageSync(key)wx.request 网络请求

　　这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是该方法不能跳转tabbar页面.

　　格式为:

　　通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.

　　格式为:

　　关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open(‘…’);

　　跳转后左上角出现返回小箭头,点击后可返回原本页面.

　　格式为:

　　跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面.

　　wxml

　　关闭所有页面，打开到应用内的某个页面。跟 wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同；

　　格式为:

　　tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

　　小程序中通常将其分为：

　　1，底部 tabBar

　　2，顶部 tabBar

　　tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时，不显示 icon，只显示文本

　　配置 tabBar 选项

　　① 打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点

　　② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象

　　③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下： pagePath 指定当前 tab 对应的页面路径【必填】

　　text 指定当前 tab 上按钮的文字【必填】

　　iconPath 指定当前 tab 未选中时候的图片路径【可选】

　　selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

　　代码如下：

　　wxml 代码如下：

　　js 代码如下：

　　页面传递的参数

　　介绍

　　Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

　　目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

　　步骤一通过 npm 安装

　　使用 npm 构建前，请先阅读微信官方的 npm 支持

　　步骤二修改 app.json

　　开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

　　需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

　　注意：

　　由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为 ‘https://blog.csdn.net/m0_64875238/article/details/’ 即可

　　步骤四构建 npm 包

　　打开微信开发者工具，点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件。

　　步骤五 typescript 支持

　　如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

　　安装 miniprogram-api-typings

　　在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

　　请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

　　引入组件

　　以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

　　所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

　　使用组件

　　引入组件后，可以在 wxml 中直接使用组件