官方开发文档：
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
需要去微信公众平台注册开发账号：
mp.weixin.qq.com
然后APPID的位置在这里：
左侧菜单栏【开发】——【开发管理】
卡片栏目项【开发设置】中
微信小程序的目录结构
└─miniprogram-1 │ app.js 小程序的逻辑 │ app.json 当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等 │ app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。 │ project.config.json 项目配置文件，做一些个性化配置，例如界面颜色、编译配置等等 │ sitemap.json 配置小程序及其页面是否允许被微信索引 │ ├─pages 里面包含一个个具体的页面 │ ├─index │ │ index.js 页面逻辑 │ │ index.json 页面配置 │ │ index.wxml 页面结构 │ │ index.wxss 页面样式 │ │ │ └─logs │ logs.js 页面逻辑 │ logs.json 页面配置 │ logs.wxml 页面结构 │ logs.wxss 页面样式 │ └─utils util.js 存放公共方法或者公共变量
快速创建页面的办法
直接在page.json里面追加页面路径，工具会自动生成对应文件
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
View 标签属性
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
1.0.0 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 1.0.0 |
| hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间，单位毫秒 | 1.0.0 |
hover-class测试：
html
<view hover-class="boxHover">view样式测试</view>
css
.boxHover { background-color: red; }
可以看到是作为一个class来识别的，在这个元素点击时触发样式效果
原始Hover的效果是扶上去触发
<view hover-class="boxHover" class="box">view样式测试</view>
css
.box:hover {
background-color: blue;
}
hover-stop-propagation 测试
<view class="father" hover-class="a"> 这是父元素 <view class="son" hover-class="b">这是子元素</view> </view>
css
.father { width: 100px; height: 100px; background-color: gainsboro; } .a { background-color: red; } .son { width: 100px; height: 50px; background-color: pink; } .b { background-color: yellowgreen; }
点击子元素会触发A和B两个一起的效果，为了不让父元素触发，就可以设置这个属性：
<view class="father" hover-class="a"> 这是父元素 <view class="son" hover-class="b" hover-stop-propagation="true">这是子元素</view> </view>
这样父节点事件不触发了
hover-start-time 测试
<view class="father" hover-class="a"> 这是父元素 <view class="son" hover-class="b" hover-stop-propagation="true" hover-start-time="500">这是子元素</view> </view>
设置延迟时间，毫秒值单位，在事件监听到，开始指定的毫秒值之后开始触发
默认值50
hover-stay-time 测试
这个是设置CSS样式效果的持续时间，默认400
<view class="father" hover-class="a"> 这是父元素 <view class="son" hover-class="b" hover-stop-propagation="true" hover-start-time="500" hover-stay-time="3000">这是子元素</view> </view>
Text 标签属性
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| selectable | boolean | false | 否 | 文本是否可选 (已废弃) | 1.1.0 |
| user-select | boolean | false | 否 | 文本是否可选，该属性会使文本节点显示为 inline-block | 2.12.1 |
| space | string | 否 | 显示连续空格 | 1.4.0 | |
| decode | boolean | false | 否 | 是否解码 | 1.4.0 |
selectable 属性已经弃用了，这里设置了以下发现确实文本还是不能选中
<view> <text selectable="true">这是一段演示文本</text> </view>
改用下面这个User-Select
<view> <text user-select="true">这是一段演示文本</text> <text user-select="true">这是一段演示文本</text> <text user-select="true">这是一段演示文本</text> </view>
space意思是是否显示连续空格，值有几种类型：
一般文档解析是不会展示连续的空格
| 值 | 说明 | 最低版本 |
|---|---|---|
| ensp | 中文字符空格一半大小 | |
| emsp | 中文字符空格大小 | |
| nbsp | 根据字体设置的空格大小 |
<view> <text user-select="true" space="emsp">这是一段 演 示 文 本</text> </view>
decode 解码，对特殊字符是否转义的处理
<view> <text>这是一段 <演示文本</text> </view> <view> <text decode>这是一段 <演示文本</text> </view>
Image 图标标签
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
基础用法：
<view> <!-- 使用 / 表示从项目根目录作为开始路径 --> <image src="/images/pig.jpg" />
<!-- 或者从本文件所在目录作为开始路径 --> <image src="./../../images/pig.jpg" /> </view>
Navigator 页面跳转
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| target | string | self | 否 | 在哪个目标上发生跳转，默认当前小程序 | 2.0.7 |
| url | string | 否 | 当前小程序内的跳转链接 | 1.0.0 | |
| open-type | string | navigate | 否 | 跳转方式 | 1.0.0 |
| delta | number | 1 | 否 | 当 open-type 为 \'navigateBack\' 时有效，表示回退的层数 | 1.0.0 |
| app-id | string | 否 | 当target="miniProgram"时有效，要打开的小程序 appId |
2.0.7 | |
| path | string | 否 | 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页 |
2.0.7 | |
| extra-data | object | 否 | 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情 |
2.0.7 | |
| version | string | release | 否 | 当target="miniProgram"时有效，要打开的小程序版本 |
2.0.7 |
| short-link | string | 否 | 当target="miniProgram"时有效，当传递该参数后，可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 |
2.18.1 | |
| hover-class | string | navigator-hover | 否 | 指定点击时的样式类，当hover-class="none"时，没有点击态效果 |
1.0.0 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 1.0.0 |
| hover-stay-time | number | 600 | 否 | 手指松开后点击态保留时间，单位毫秒 | 1.0.0 |
| bindsuccess | string | 否 | 当target="miniProgram"时有效，跳转小程序成功 |
2.0.7 | |
| bindfail | string | 否 | 当target="miniProgram"时有效，跳转小程序失败 |
2.0.7 | |
| bindcomplete | string | 否 | 当target="miniProgram"时有效，跳转小程序完成 |
2.0.7 |
<view> <view> <navigator url="/pages/pageA/pageA">to PageA 1</navigator> <navigator url="./../pageA/pageA">to PageA 2</navigator> <navigator url="/pages/pageB/pageB">to PageB 1</navigator> <navigator url="./../pageB/pageB">to PageB 2</navigator> </view> </view>
目录文件：
└─miniprogram-1
│ app.js
│ app.json
│ app.wxss
│ project.config.json
│ sitemap.json
│
├─images
│ pig.jpg
│
├─pages
│ ├─index
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ ├─logs
│ │ logs.js
│ │ logs.json
│ │ logs.wxml
│ │ logs.wxss
│ │
│ ├─pageA
│ │ pageA.js
│ │ pageA.json
│ │ pageA.wxml
│ │ pageA.wxss
│ │
│ └─pageB
│ pageB.js
│ pageB.json
│ pageB.wxml
│ pageB.wxss
│
└─utils
util.js
路径是定位到页面的目录下面的同名内容，框架因该是做了些文件读取的处理
不允许访问外部网络资源：
<navigator url="https://www.baidu.com/">to Baidu</navigator>
跳转方式：
| open-type | string | navigate | 否 | 跳转方式 |
值种类：
open-type 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 | |
| redirect | 对应 wx.redirectTo 的功能 | |
| switchTab | 对应 wx.switchTab 的功能 | |
| reLaunch | 对应 wx.reLaunch 的功能 | 1.1.0 |
| navigateBack | 对应 wx.navigateBack 的功能 | 1.1.0 |
| exit | 退出小程序，target="miniProgram"时生效 |
2.1.0 |
默认是使用Navigator，详细见文档内容
滚动区域：
这是一个横向展示案例：
<scroll-view scroll-x="true"> <view class="out"> <view class="box">1</view> <view class="box">2</view> <view class="box">3</view> <view class="box">4</view> <view class="box">5</view> </view> </scroll-view>
css:
.box { display: inline-block; width: 120px; height: 60px; background-color: red; text-align: center; line-height: 60px; margin: 10px; color: white; font-weight: bolder; flex : 0 0 100px; } .out { border: 1px solid yellow; display: flex; flex-wrap: nowrap; }
包含在内部的元素需要撑破机型的X轴Y轴限制才可以实现
设置scroll-left初始滑动偏移量：
<scroll-view scroll-x="true" scroll-left="120"> <view class="out"> <view class="box">1</view> <view class="box">2</view> <view class="box">3</view> <view class="box">4</view> <view class="box">5</view> </view> </scroll-view>
设置纵向滑动案例：
html
<scroll-view scroll-y="true" scroll-left="120" class="out"> <view class="box">1</view> <view class="box">2</view> <view class="box">3</view> <view class="box">4</view> <view class="box">5</view> </scroll-view>
css
.box { width: 120px; height: 60px; background-color: red; text-align: center; line-height: 60px; margin: 10px; color: white; font-weight: bolder; } .out { border: 1px solid yellow; height: 200px; }
实际上发现，直接在滑动区域里面加元素就行了
请发表评论