【微信小程序】01 入门

官方开发文档：

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>这是一段&nbsp; &lt;演示文本</text>
</view>

<view>
  <text decode>这是一段&nbsp; &lt;演示文本</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>

设置纵向滑动案例：