微信营销小程序开发 第1篇
下载微信web开发者工具，根据自己的操作系统下载对应的安装包进行安装即可。
pages 注册页面 window 窗口信息
模板文件 业务逻辑 样式 页面配置
把新建的文件路径调到最上面那就是主页了，意思就是，第一个路径就是首页的路径!
微信营销小程序开发 第2篇
国内绝对行业第一的阿里云服务器保障，安全，高速，稳定，防攻击，防丢失，多备份。
为客户创造价值，思客户所想，是相互认可、信赖选择的前提
优质服务本该如此，先进项目管理流程，运筹帷幄，决胜千里
需求沟通
签订合同
项目启动
项目原型
视觉设计
模块开发
功能整合
外部测试
内部测试
需求沟通
签订合同
项目启动
项目原型
视觉设计
模块开发
功能整合
外部测试
内部测试
微信营销小程序开发 第3篇
1. 小程序中组件的分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类，分别是：
① 视图容器 ② 基础内容 ③ 表单组件 ④ 导航组件 ⑤ 媒体组件 ⑥ map 地图组件 ⑦ canvas 画布组件 ⑧ 开放能力 ⑨ 无障碍访问
2. 常用的视图容器类组件
① view ⚫ 普通视图区域 ⚫ 类似于 HTML 中的 div，是一个块级元素 ⚫ 常用来实现页面的布局效果 ② scroll-view ⚫ 可滚动的视图区域 ⚫ 常用来实现滚动列表效果 ③ swiper 和 swiper-item ⚫ 轮播图容器组件 和 轮播图 item 组件
右下角第4段代码解释：
.container1 这里的.表示选择器是一个类选择器。container1是类名，这意味着这个样式规则将应用于所有具有container1类的HTML元素。
display: flex;： 当一个元素设置为display: flex;后，它的直接子元素将按照弹性盒模型（Flexbox）的布局方式排列。Flexbox是一种用于在容器内分配和对齐子元素的一维布局方法。
justify-content: space-around justify-content属性用于设置弹性容器内弹性项目在主轴上的对齐方式。 space-around值表示弹性项目将在主轴上平均分布，每个项目两侧的空间相等
微信营销小程序开发 第4篇
小程序的模板语法约等于vue的模板语法
（不常用）
import 只能导入template内容 template/ < template name=“userCart”> 用户名：{{name}} < /temlate> < import src=“/template/”> < tempate is=“userCart” data=“{{…u1}}”>
include 只能导入非template内容 template/ < view> {{内容}} view> < include src=“/template/”>
显示提示
本地存储
本地取
微信营销小程序开发 第5篇
提示：提交审核阶段有些需要注意的事项，一个是小程序的代码最大限制为2M，如果有分包的话可以有更大容量，如果您需要与后端交互，建议把所有相关的图片放到服务器上，另一个就是注册小程序前需检查小程序的logo和名字是否已经被注册过，是否被别人注册了商标
代码以及课件和视频资源领取方式： 关注公众号：小猿搜码 后台发送：csdn小程序
微信营销小程序开发 第6篇
page存放当前小程序所有页面的路径，可以不主动添加，可直接在目录下右击新建页面，page会自动注册增加该页面的路径。
1. 什么是WXML
WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML。 2. WXML 和 HTML 的区别
① 标签名称不同 ⚫ HTML （div, span, img, a） ⚫ WXML（view, text, image, navigator） ② 属性节点不同
③ 提供了类似于 Vue 中的模板语法 ⚫ 数据绑定 ⚫ 列表渲染 ⚫ 条件渲染
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，类似于网页开发中的 CSS。
WXSS 和 CSS 的区别
① 新增了 rpx 尺寸单位 ⚫ CSS 中需要手动进行像素单位换算，例如 rem ⚫ WXSS 在底层支持新的尺寸单位 rpx，在不同大小的屏幕上小程序会自动进行换算
② 提供了全局的样式和局部样式 ⚫ 项目根目录中的 会作用于所有小程序页面 ⚫ 局部页面的 .wxss 样式仅对当前页面生效
③ WXSS 仅支持部分 CSS 选择器 ⚫ .class 和 #id ⚫ element ⚫ 并集选择器、后代选择器 ⚫ ::after 和 ::before 等伪类选择器
微信营销小程序开发 第7篇
tabBar 是移动端应用常见的页面效果， 用于实现多页面 的快速切换 。 小程序中通常将其分为： 1，底部 tabBar 2，顶部 tabBar
① 打开 配置文件，和 pages、window 平级，新增 tabBar 节点 ② tabBar 节点中，新增 list 数组 ，这个数组中存放的，是每个 tab 项的配置对象 ③ 在 list 数组中， 新增每一个 tab 项的配置对象 。对象中包含的属性如下： pagePath 指定当前 tab 对应的页面路径 【 必填 】 text 指定当前 tab 上按钮的文字【 必填】 iconPath 指定当前 tab 未选中时候的图片路径【可选】 selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】
微信营销小程序开发 第8篇
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。
使用 npm 构建前，请先阅读微信官方的 npm 支持
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram， 在其外部，npm 构建无法正常工作。 需要手动在 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为 ‘./’ 即可
如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。
安装 miniprogram-api-typings
在 中增加如下配置，以防止 tsc 编译报错。 请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。
以 Button 组件为例，只需要在或中配置 Button 对应的路径即可。 所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。
引入组件后，可以在 wxml 中直接使用组件
接着打开微信开发者工具，导入example目录的项目就可以预览示例了。
微信营销小程序开发 第9篇
这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.
格式为:
格式为:
格式为:
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面.
wxml js
关闭所有页面，打开到应用内的某个页面。 跟 一样左上角不会出现返回箭头，但两者却不完全相同；
格式为: