如何设计小程序模板 第1篇
既然是小程序，肯定不可避免的需要向其他网站发送网络请求。但是处于安全考虑，小程序官方对数据接口的请求做出了限制：
配置域名在微信小程序管理后台中配置：
微信小程序向网站发送请求，需要调用微信小程序提供的 () 方法，通过这个方法可以发送 GET 或者 POST等其他请求类型的请求。
GET 请求：
POST 请求：
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数：
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验
注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用.
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。
如何设计小程序模板 第2篇
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。 设置步骤： -> window -> 为 onReachBottomDistance 设置新的数值
注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。
tabBar 是移动端应用常见的页面效果，用于实现多页面 的快速切换。小程序中通常将其分为：
注意：
根据资料中提供的小图标、 在小程序中配置如图所示的 tabBar 效果：
① 把资料目录中的 images 文件夹，拷贝到小程序项目根目录中
② 将需要用到的小图标分为 3 组，每组两个，其中：
通过 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下：
其中，home 是首页，message 是消息页面，contact 是联系我们页面。
① 打开 配置文件，和 pages、window 平级，新增 tabBar 节点
② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象
③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：
在文件中输入tar会自动生成一些配置项目
小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。
小程序中， 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。 如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。
全局变量定义的项目: 局部变量的项目:
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下 两个限制：
需求描述：假设在自己的微信小程序中，希望请求 域名下的接口 配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
然后进行身份验证
注意事项：
调用微信小程序提供的 () 方法，可以发起 GET 数据请求，示例代码如下：
调用微信小程序提供的 () 方法，可以发起 POST 数据请求，示例代码如下：
在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数，示例代码如下：
如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https
协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时 开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项， 跳过 request 合法域名的校验。
注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小 程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所 以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。
① 获取轮播图数据列表的接口
② 获取九宫格数据列表的接口
① 能够使用 WXML 模板语法渲染页面结构
⚫ wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
② 能够使用 WXSS 样式美化页面结构
⚫ rpx 尺寸单位、@import 样式导入、全局样式和局部样式
③ 能够使用 对小程序进行全局性配置
⚫ pages、window、tabBar、style
④ 能够使用 对小程序页面进行个性化配置
⚫ 对单个页面进行个性化配置、就近原则
⑤ 能够知道如何发起网络数据请求
⚫ () 方法、onLoad() 事件
如何设计小程序模板 第3篇
什么是 WXSS？
WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式。WXSS用于决定WXML的组件应该怎么显示，类似于网页开发中的CSS。为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时，为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有尺寸单位和样式导入等。
与 CSS 相比，WXSS 扩展的特性有：
rpx是微信小程序独有的、解决屏幕自适应的尺寸单位，可以根据屏幕宽度进行自适应，不论屏幕大小，规定屏幕宽为750rpx。通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配。
rpx与px之间的换算以iPhone6为例，iPhone6的屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，也就是1rpx=物理像素，因为设计师的图一般是二倍图，所以在iPhone6下直接使用测量出来的值来设置rpx就可以了。
正是因为这，官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。
在微信小程序开发中，样式导入是一种使用WXSS提供的@import语法来导入外部样式表的方法。通过样式导入，可以将样式代码分离到单独的样式表中，以便更好地组织和管理代码。
使用@import语法，可以在WXSS文件中导入其他WXSS文件的样式。例如，可以在文件中导入文件中的样式，以便在整个小程序_享和重用这些样式。
在样式导入时，需要指定需要导入的样式表的相对路径。例如，如果文件位于与文件同一目录下，可以使用@import __来导入该文件中的样式。
通过样式导入，可以提高代码的可维护性和可重用性，同时也有助于减少代码冗余和降低样式冲突的可能性。
全局样式：微信小程序中的全局样式是指在文件中定义的样式。这些样式对小程序中的每个页面都有效，可以用来设置全局的样式风格，例如字体、颜色、布局等。通过在文件中定义样式，可以让整个小程序的样式风格保持一致，提高了用户体验。
局部样式：微信小程序中的局部样式是指在页面级别的WXSS文件中定义的样式。这些样式只作用于对应的页面，不会影响其他页面。通过在页面级别的WXSS文件中定义样式，可以实现页面的个性化定制，使每个页面的样式都符合特定的需求和设计风格。
我们将鼠标放在对应的 CSS 样式中就会显示出权重。
全局配置文件的常用配置项：
小程序窗口组成部分：
注意：上拉触底默认距离为50px，如果没有特殊需求，建议使用默认值即可。