位置: IT常识 - 正文
前端微信小程序开发基础(前端微信小程序支付功能怎么实现)
编辑：rootadmin推荐整理分享前端微信小程序开发基础(前端微信小程序支付功能怎么实现)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端微信小程序iOS调用wx.getLocation,前端微信小程序支付功能怎么实现,前端微信小程序开发,前端微信小程序支付流程,前端微信小程序开发面试题,前端微信小程序开发,前端微信小程序项目经验简历,前端微信小程序支付流程,内容如对您有帮助，希望把文章链接给更多的朋友！
文章参考（黑马小程序教学视频）仅供参考与学习
简介小程序和普通页面开发的区别运行环境不同网页运行在浏览器中，小程序运行在微信环境中
API不同由于运行环境不同，所以小程序中，无法调用DOM和BOM的API.
但是，小程序中可以调用微信环境提供的各种API，例如：
地理定位扫码支付开发模式不同网页发开模式：浏览器+代码编辑器
小程序有自己的一套标准开发模式：
申请小程序开发账号安装小程序开发者工具创建和配置小程序项目注册小程序账号&安装开发者工具点击注册按钮微信公众平台 点击右上角 “立即注册”即可进入小程序开发账号的注册流程
选择注册账号的类型填写账号信息，邮箱激活，信息登记具体可以查看此视频 微信小程序注册账号&安装开发者工具
登录成功，获取小程序的AppID了解微信开发者工具微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：
快速创建小程序项目代码的查看和编辑对小程序功能进行调试小程序的预览和发布下载开发者工具安装一直点击下一步
扫码登录创建第一个小程序 设置外观和代理 点击“加号”按钮 填写项目信息 创建成功认识小程序项目的基本组成结构pages用来存放所有小程序的页面
页面的 .json 配置文件app.js小程序的入口文件
app.json小程序的全局配置文件，包含了小程序的所有页面路径、窗口外观、界面表现、底部tab等
app.wxss小程序项目的全局样式文件
project.config.json项目的配置文件，用来记录我们对小程序开发工具所做的个性化配置
project.private.config.json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中
sitemap.json用来配置小程序及页面是否允许被微信索引，效果类似于pc页面中的SEO
当action值为 disallow时：表示不被索引当action值为 allow时：表示被索引认识小程序页面快速新建小程序页面 修改项目首页 WXML 模板什么是 WXMLWXML 是小程序框架设计的一套 标签语言，用来构造小程序页面的结构 ，其作用类似于页面开发中的 HTML
WXML 和 HTML 的区别标签名称不同 HTML（div，span，img，a）WXML （view，text，image，navigator）属性节点不同<a href='#'>超链接</a><navigator url='/pagea/home/home'></navigator>提供了类似于vue中的模板语法数据绑定列表渲染条件渲染WXSS 和 CSS 的区别新增了 rpx 尺寸单位 css中需要手动进行像素单位换算，例如remWXSS 在底层之村新的吃u你单位 rpx ， 在不同大小的屏幕上小程序会自动进行换算提供了全局的样式和局部样式项目根目录中的 app.wxss 会作用于所有小程序页面局部页面的 wxss 样式仅对当前页面生效WXSS仅支持部分CSS选择器.class和#idelement并集选择器、后代选择器::after和 ::before 等伪类选择小程序中 .js 文件的分类app.js是 整个小程序项目的入口文件，通过调用 APP() 函数来启动整个小程序页面的 .js 文件是 页面中的入口文件， 通过 调用 Page() 函数来创建并运行页面小程序中组件的分类九大组件开发者可以基于组件快速搭建出漂亮的页面结构，官方把小程序的组件分为9大类，分别是：
视图容器基础内容表单组件导航组件媒体组件map地图组件canvas画布组件开放能力无障碍访问 长用的视图容器类组件view
类似于HTML中的div，是一个块元素scroll-view
可滚动的视图区域常用来实现滚动列表效果swiper和swiper-item
轮播图效果长用的基础内容组件text
文本组件类似于HTML中的span，是一个行内元素支持长按选中操作，属性：selectablerich-text
富文本组件支持把HTML字符串渲染为WXML结构其他长用组件button
按钮组件功能比HTML更加丰富通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户授权，获取用户信息等）image
图片组件image组件默认宽度约300px，高度约240pxnavigator
页面导航组件类似于HTML中的a链接小程序API概述 概述小程序中API是由宿主环境提供的，通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力，例如：获取用户信息，本地存储，支付功能等
小程序API的3大分类事件监听API特点：以 on 开头，用来监听某些事件的触发举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件同步API特点1：以 Sync 结尾的 API 都是同步API特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常举例：wx.setStorageSync('key','value')向本地存储中写入内容异步API特点：类似于jQuery中的 $.ajax(options)函数，需要通过 success fail complete 接受调用的结果举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据发布上线小程序发布上线的整体步骤上传代码 在后台查看上传之后的代码 提交审核 发布小程序的推广与运行数据的查看 基于小程序码进行推广 查看小程序运营数据的两种方式1.在“小程序后台”查看
2.使用“小程序数据助手”查看
WXHML模板 WXHL模板语法-事件绑定（渲染层对应wxhl页面，逻辑层对应js文件）
小程序中常用的事件 事件对象的属性列表target 与 currtarget的区别bindtap的语法格式在事件处理函数中为data中的数据赋值
事件传参 {{2}} 传入的是数字 2 ，直接写2 传入的字符串 2
bindinput语法格式实现文本框与data之间的数据同步
实现步骤：
定义数据、渲染结构、绑定input事件处理函数
WXHL模板语法：条件渲染1.wx:if2.结合<block>使用wx:if3.hidden
(相对与vue中的v-show相同)
4.wx:if与hidden的对比 WXHL模板语法-列表渲染1.wx:for2.wx:for手动指定索引和当前项的变量名* 3.wx:key wxss模板样式1.什么是wxss2.wxss与css区别 wsss模板样式-rpx1.什么是rpx单位2.rpx实现原理3.rpx与px单位换算 wxss模板样式-样式导入1.什么是样式导入
2.@import的语法格式
wxss模板样式-全局样式与局部样式1.全局样式
2.局部样式
注意：鼠标光标放到类名或标签名或id名上时，可查看权重
全局配置全局配置文件及常用的配置项 全局配置windows小程序窗口的组成部分 了解widows节点常用的配置项设置导航栏的标题 设置导航栏的背景色设置导航栏的标题颜色全局开启下拉刷新功能
（模拟器有时候不能实现真机的效果）
设置下拉刷新时的窗口的背景色只能是16进制
设置下拉刷新的loding效果样式 设置上拉触底的距离全局配置 -tabBar 什么是tabBartabBar的6个组成部分 tabBar的节点配置项每一个tab项的配置选项 案例：配置tabBar需求
实现步骤
1.拷贝图标资源
2.新建3个对应的tab页面
3.配置tabBar选项
小程序的页面配置页面配置文件的作用页面配置和全局配置的关系页面配置中常用的配置项网络数据请求小程序中网络请求的限制配置request合法域名 发起GET请求发起POST请求在页面刚加载时请求数据 跳过request合法域名校验关于跨域和Ajax 案例-本地生活首页效果以及实现步骤待续............
下一篇：webpack性能优化方案(webpack性能优化 加载)
