已有网站 微信小程序 第1篇
注意：
花生壳的映射不能设置为80端口的映射（我也没找到原因在哪，客服反馈是要设置自定义端口）
成功之后，对外访问的地址
最后上个配置成功后，请求的效果吧！
如果你的本地服务器是iis或者其他的web服务器，配置方式差不多，这里最关键的就是个域名映射这个步骤。
已有网站 微信小程序 第2篇
把data中的数据绑定到页面上渲染，使用Mustache语法（双大括号）将变量包起来即可, .wxml 文件 语法格式为：
应用场景：
2.在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成 e） 来接收：
通过调用(dataObject) 方法，可以给页面data中的数据重新赋值 实例如下：
注意： 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数.例如：
因为小程序会把bindtap 的属性值，统一当作事件名称来处理，相当于调用了一个outerHandle(11)的事件处理函数。
可以为组件提供data-自定义属性传参,其中代表的是参数的名称，示例如下：
info 会被解析为参数的名字 数值2会被解析为参数的值 在事件处理函数中，通过 .参数名即可获取到具体参数的值，示例如下：
在小程序中，通过input事件来响应文本框的输入事件,语法格式如下： 1.通过bindinput,可以为文本框绑定输入事件：
注意：input 响应数据 会没办法时时获取 解决方案：
2.在页面的.js 文件中定义事件处理函数
实现文本框和data之间的数据同步 实现步骤： 1.定义数据
2.渲染结构
3.美化样式
4.绑定input 事件处理函数 赋新值
在小程序中,使用wx:if=“{{condition}}” 来判断是否需要渲染该代码：
也可以用wx:elif 和wx:else 来添加else判断
结合使用 wx：if 如果要依次控制多个组件的展示和隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx：if 控制属性，示例如下：
注意并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
在小程序中，直接使用hidden=“{{condition}}” 也能控制元素的显示和隐藏：
wx:if 与hidden 的对比 1.运行方式不同 wx：if 以动态创建和移除元素的方式，控制元素的展示和隐藏 hidden 以切换样式的方式（display：none/block）,控制元素的显示与隐藏 使用建议： 频繁切换时，建议使用hidden 控制条件复杂时，建议使用wx：if搭配wx：elif,wx：else进行展示与隐藏的切换。
通过wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
默认情况下,当前循环项的索引是index表示，当前循环项用item 表示。
使用wx：for-index 可以指定当前循环项的索引的变量名 使用wx：for-item可以指定当前项的变量名 示例代码如下：
类似于Vue列表渲染中的：key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率,示例代码如下：
WXSS（WeiXin Style Sheets）是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS
wxss 具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发. 与CSS相比,WXSS扩展的特性有： rpx 尺寸单位 @import 样式导入
rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位.
rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自主适配,rpx把所有设备的屏幕,在宽度上等分为750份（即：当前屏幕的总宽度为750px). 在较小的设备上,1rpx所代表的宽度较小 在较大的设备上,1rpx所代表的宽度较大 小程序在不同设备上运行的时候,会自动把rpx的呀那个是单位换算成对应的像素单位来渲染，从而实现屏幕适配.
在iphone6上,屏幕宽度为375px,共有750个物理像素,等分为750rpx.则： 750rpx=375px=750物理像素 1rpx=物理像素 官方建议：开发微信小程序时，设计师可以用iPhone6 作为视觉稿的标准. 开发举例：在iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为200rpx 和40rpx.
使用WXSS提供的@import语法,可以导入外联的样式表
@import 后跟需要导入的外联样式表的相对路径,用;表示语句结束.示例如下：
1.全局样式 定义在中的样式称为全局样式，作用与每一个页面. 2.局部样式 在页面的.wxss文件中定义的样式称为局部样式,只作用于当前页面. 注意： 1.当局部样式和全局呀那个是冲突时，根据就近原则，局部样式会覆盖全局样式 2.当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
小程序根目录下的文件是小程序的全局配置文件,常用的配置项如下： 记录当前小程序所有页面的存放路径 全局设置小程序窗口的外观 设置小程序底部的tabBar 效果 是否启用新版的组件样式
设置导航栏的标题 设置步骤：;window->navigationBarTitleText 需求：把导航条上的标题,从默认的WeChat 修改为：我的世界，效果如图所示： 设置导航栏的背景色 设置步骤：;window->navigationBarBackgroundColor 需求把导航栏标题的背景色，从默认的#fff修改为#00b26a，效果如图所示：
设置导航栏的标题颜色 设置步骤 ：;window->navigationBarTextStyle 需求：把导航条上的标题,从默认的black修改为white，效果如上图 注意：navigationBarTextStyle 的可选值只有black 和white 全局开启下拉刷新功能 概念：下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。 设置步骤：–>window–>把enablePullDownRefresh的值设置为true 注意：在中启用下拉刷新功能,会作用每个小程序页面 设置下拉刷新功能之后,默认的窗口背景为白色.如果自定义下拉刷新窗口背景色,设置步骤为： –>window–>为backgroundColor指定16进制的颜色值#efefef.效果如下： 设置下拉刷新时loading的样式 当全局开启下拉刷新功能之后,默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为：–>window–>backgroundTextStyle指定dark值.效果如下图 设置上拉触底的距离 概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉华东操作,从而加载更多数据行为. –>window–>onReachBottomDistance 设置新的数值 注意：默认距离为50px,如果没有特殊需求，建议使用默认值即可.
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换.小程序中通常将其分为： 底部;tabBar 顶部tabBar 注意：tabBar 中只能配置最少2个，最多5个tab页签 当渲染顶部tabBar时,不显示icon,只显示文本 tsbBar的6个组成部分 ：tabBar 的背景色 ：选中时的图片路径 ：tabBar 上边框的颜色 ：未选中时的图片路径 ：tab上文字选中时的颜色 ：tab上文字的默认（未选中）颜色 节点的配置项 每个tab项的配置选项 效果图如下： 代码： 文件
需求描述
图标可以从阿里巴巴图标库自己注册账号获取
小程序中,每个页面都有自己的.json 配置文件,用来对当前页面的窗口外观，页面效果等进行配置 小程序中,中的window 节点，可以全局配置小程序中每个页面的窗口表现. 如果某些小程序页面想要拥有特殊的窗口表现，此时,页面级别的.json 配置文件就可以实现这种需求. 注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准.
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制： 1.只能请求HTTPS类型的接口 2.必须将接口的域名添加到信任列表中 配置request 合法域名 需求描述：假设在自己的微信小程序中，希望请求https：域名下的接口 配置步骤：登录微信小程序管理后台–>开发—>开发设置–>服务器域名—>修改request合法域名 注意事项： 1，域名只支持https 协议 2.域名不能使用IP地址或localhost 3.域名必须经过ICP 备案 4.服务器域名一个月内最多可申请5次修改
调用微信小程序提供的（）方法，可以发起GET数据请求，示例如下：
调用微信小程序提供的（）方法,可以发起POST数据请求,示例代码如下：
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据.此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：
如果后端程序员仅仅提供了http协议的接口，暂时没有提供https协议的接口 此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启[开发环境不效验请求域名，TLS版本及HTTPS证书]选项,跳过request 合法域名的效验。 注意： 跳过request 合法域名效验的选项，仅限在开发与调试阶段使用。 6.关于跨域和AJAX的说明 跨域问题只存在于基于浏览器的Web开发中，由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。 Ajax技术的核心是依赖于浏览器中的XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端，所以小程序中不能叫发起Ajax 请求，而是叫做发起网络数据请求. 案例：本地生活案例 步骤： 1.新建项目并梳理项目结构 2.配置导航栏效果 3.配置tabBar效果 4.实现轮播图 5.实现九宫格效果 6.实现图片布局
已有网站 微信小程序 第3篇
组件的引用方式分为局部引用和全局引用，顾名思义： 局部引用：组件只能在当前被引用的页面内使用， 在页面的.json 配置文件中引用组件的方式，叫做局部引用 代码如下：
全局引用：组件可以在每个小程序页面中使用 在 全局配置文件中引用组件的方式，叫做“全局引用” .示例代码如下：
根据组件的使用频率和范围，来选择合适的引用方式 如果某个组件在多个页面中经常被用到，建议进行全局引用 如果某个组件只在特定的页面中被用到，建议进行局部引用 组件和页面的区别 从表面来看，组件和页面都是由.js ,.json .wxml 和.wxss 这四个文件组成的，但是组件和页面的.js 与.json 文件有明显的不同 组件的.json 文件中需要声明 “component”:true属性 组件的.js 文件中调用的是Component（）函数 组件的时间处理函数需要定义到methods 节点中
默认情况下,自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构 组件A的样式不会影响组件C的样式 组件A的样式不会影响小程序页面的样式 小程序页面的样式不会影响组件A和C的样式 好处： 1.防止外界样式影响组件内部的样式 2.防止组件的样式破坏外界的样式
中的全局样式对组件无效 只有class 选择器会有样式隔离效果，id 选择器，属性选择器，标签选择器不受样式隔离的影响 建议：在组件和引用组件的页面中建议使用class 选择器，不要使用id ，属性，标签选择器！ 修改组件的样式隔离选项 默认情况下,自定义组件的呀那个是隔离特性能够防止组件内外样式互相干扰的问题，但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过stylesolation 修改组件的样式隔离选项，用法如下： 自定义组件–数据,方法和属性 数据 在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中，示例如下： 2 methods 方法 在小程序组件中，事件处理函数和自定义方法需要定义到methods 节点中，示例代码如下： 属性 在小程序组件中，properties 是组件的对外属性，用于接收外界传递组件中的数据, 和properties 的区别 在小程序的组件中,properties属性和data数据的用法相同，它们都是可读可写的，只不过： data 更倾向于存储组件的私有数据 properties更倾向于存储外界传递到组件中的数据
使用setData 修改properties 的值 由于data 数据和properties 属性在本质上没有任何区别，因此Properties属性的值也可以用于页面渲染,或使用setData 为properties 中的属性重新赋值，示例如下： 什么是数据监听器 数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作.它的作用类似于Vue中的watch 侦听器.在小程序组件中，数据侦听器的基本语法格式如下：
组件的UI结构如下： 监听对象数据的变化 数据监听器支持监听对象中单个或多个属性的变化，示例语法如下： 监听对象中所有属性的变化 如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符**来监听对象中所有属性的变化，示例代码如下：
概念：纯数据字段指的是哪些不用于界面渲染的data字段 应用场景：例如有些情况下，某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用，带有这些特性的data字段适合被设置为纯数据字段。 好处：纯数据字段有助于提升页面更新的性能. 2. 使用规则 在Component 构造器的options节点中，指定pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将称为纯数据字段，示例如下： 使用纯数据字段改造数据监听器案例 组件全部的生命周期函数 小程序组件可用的全部生命周期如下表所示：
在小程序组件中，最重要的生命周期函数有3个，分别是created ，attached，detached 它们各自的特点如下： 1.组件实例刚被创建好的时候，created 生命周期函数会被触发 此时还不能调用setData 通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段 2. 在组件完全初始化完毕 ，进入页面节点树后，attached 生命周期函数会被触发 此时, 已被初始化完毕 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据） 3. 在组件离开页面节点树后，detached 生命周期函数会被触发 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数 此时适合做一些清理性质的工作
在小程序组件中，生命周期函数可以直接定义在Component 构造器的第一级参数中，可以在lifetimes 节点内进行声明（这是推荐的方式，其优先级最高）.示例代码如下： 什么是组件所在页面的生命周期 有时,自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期 例如：每当触发页面的show生命周期函数的时候， 在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是：
组件所在页面的生命周期函数，需要定义在pageLifetimes 节点，示例代码如下：
已有网站 微信小程序 第4篇
阿里云免费的https证书地址
这个步骤相对来说比较简单，需要注意的地方也不多，按照阿里云官方的提示来，就能够操作成功了。值得注意的是你在申请证书过程中，证书是免费的，你不用付费，但是需要下单，下单完成后需要完善你的域名信息，然后提交审核。审核完成后，官方自动给你发放证书，顺利的话一个小时就能搞定。
注意：
1.通过花生壳，内网映射出本地的访问地址
2.把阿里云证书补全信息的域名填写完成后，阿里云会进入 审核中，需要下载他的一个 文件
i.在进度查询页面，单击 验证文件，下载到本地。
ii.在您的站点服务器的根目录创建.well-known/pki-validation，创建文件夹Windows命令是 md _.well-known_ 子目录pki-validation。
iii.将 验证文件上传到.well-known/pki-validation目录下 目录。 完成后，可通过验证 URL 地址（ ）访问。 参考如何配置域名授权验证?