微信小程序（学习第一天）

微信小程序（学习记录1.1）

使用工具：微信开发者工具 stable 1.03.2010240

手把手教你做一个自己的小程序https://zhuanlan.zhihu.com/p/33507919

微信小程序开发平台的下载以及快速入门https://zhuanlan.zhihu.com/p/32834666

学习借鉴模板：小熊の日记https://www.php.cn/xiazai/code/5113

学习教程途径：教程出自黑马程序员http://yun.itheima.com/course/589.html?bili

源代码的学习——（四层架构wxml、wxss、js、json）

.wxml小程序内部的标签层

.wxss小程序内部的样式文件

.js小程序内部的JavaScript逻辑文件

.json小程序内部的配置文件

app.json（常用全局配置文件建议使用微信开发者工具编译，有代码提示）

pages:当前项目的子页面，对应“pages页面文件夹”

window:定义小程序所有页面的顶部背景颜色，文字颜色定义等。 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

tabbar:提供标签页的效果，其中list字段数需要大于1，list页面路径pagepath对应pages页面文件夹

页面配置.json文件配置如同app.json

sitemap配置（了解）

sitemap.json文件用于配置小程序以及页面是否允许被微信索引

模板语法

数据绑定：

页面js的page下面的data中定义变量属性，在wxml中使用{{变量}}调用；wxml中text标签、view标签

运算：

{{表达式，不能使用语句代码段}}

列表渲染

wx:for 
项的变量名默认为  item item   wx:for wx:for-item item  可以指定数组当前元素的变量名
下标变量名默认为  index index   wx:for wx:for-index index  可以指定数组当前下标的变量名
wx:key wx:key  ⽤来提⾼数组渲染的性能

条件渲染

在框架中，使⽤ wx:if="{{condition}}" wx:if="{{condition}}" 来判断是否需要渲染该代码块：

小程序事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindtap 、bindinput、bindinput、bindchange 、bindchange 等不同的组件⽀持不同的事件，具体看组件的说明即可。注意wxml文件的标签中绑定事件的时候不能带括号以及传参，通过自定义属性的方式传递参数，事件源中获取自定义属性。

样式语言wxss

WXSS( WeiXin Style Sheets WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述WXML的组件样式。相比较css,具有响应长度单位rpx，样式导入功能特性。
rpx rpx （responsive pixel）:

可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 750rpx 。如在 iPhone6 iPhone6 上，屏幕宽度为 375px 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像 750rpx = 375px = 750物理像素 ，1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 。
使⽤步骤：
1.确定设计稿宽度pageWidth

2.计算⽐例 750rpx = pageWidth px ，因此 1px=750rpx/pageWidth 。

3.在less⽂件中，只要把设计稿中的 px =>750/pageWidth rpx 即可。

样式导入

wxss中直接就⽀持，样式导⼊功能。
也可以和less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。

备注：返回上一个路径使用“../”