微信里面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
< template name=“userCart”> 用户名：{{name}} < /temlate>
home.wxml
< import src=“/template/utils.wxml”>
< tempate is=“userCart” data=“{{…u1}}”>
include
只能导入非template内容
template/foot.wxml < view> {{内容}} </ view>
home.wxml < include src=“/template/foot.wxml”>
显示提示
- showToast
本地存储
- wx.setStorageSync(key,value)
本地取
- wx.getStorageSync(key)
- wx.request 网络请求
这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.
格式为:
通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.
格式为:
关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open(‘…’);
跳转后左上角出现返回小箭头,点击后可返回原本页面.
格式为:
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面.
关闭所有页面，打开到应用内的某个页面。 跟 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 中直接使用组件
在开发者工具中预览示例小程序
以上就是本篇文章【微信小程序开发（超详细保姆式教程）】的全部内容了，欢迎阅览 ！ 文章地址：http://w.yusign.com/quote/8693.html 行业 资讯 企业新闻 行情 企业黄页 同类资讯 网站地图 返回首页 述古往 http://w.yusign.com/mobile/ , 查看更多接着打开微信开发者工具，导入example目录的项目就可以预览示例了。