小程序基本语句01

app.json

易错点

1.忘记加，

2.“ “用英文字符

3. ”:“代替 ”=“

作用-特殊字段：

pages字段：

1.新建页面+确定页面出现顺序

"pages":[
    "pages/mine02/mine02",
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"
  ]

window字段：

2.设置初始页面属性

置顶区域

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#0094ff",//置顶区域背景颜色
    "navigationBarTitleText": "我的应用",  //置顶标题
    "navigationBarTextStyle":"white", //标题字体颜色
    "enablePullDownRefresh":true,   //能否下拉刷新
    "backgroundColor":"#0083ff"  //下拉部分的颜色
  }

tabBar字段：

3.设置分类栏->访问其他页面

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_mine.png",
      "selectedIconPath": "icon/mine.png"
    },
    {
      "pagePath": "pages/mine02/mine02",//页面路径
      "text": "搜索",//标题
      "iconPath": "icon/_mine02.png",
      "selectedIconPath": "icon/mine02.png"
    }
  ],
  "color": "#0094ff",//分类栏未选中时字体颜色
  "selectedColor": "#ff9400",//分类栏选中是字体颜色
  "backgroundColor": "#aabbdd"//分类栏背景颜色

单独页面-mine02

mine02.json

与app.json相同，可以个性化设置当前页面，设置结果覆盖app.json的内容

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0094ff"
}

事件绑定

输入绑定

时刻输出 所输入的数据

wxml：

<input type="text" bindinput="handleInput"/>

js：

 handleInput(e){
    this.setData({
      num:e.detail.value
    })
  },

注意setData是（）套{}

按钮绑定

wxml：

<!-- 绑定按钮 -->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

js：

  handletap(x){
    const operation=x.currentTarget.dataset.operation//这个要记住
    this.setData({
      num:this.data.num+operation
    })
  },

样式

wxss语言

1.函数之间没有“，”

commen-style

新建style文件夹，里面新建commen.wxss

/* 
  设置公共view样式
*/
view{
  font-size: 100rpx;
  color: aqua;
}
text{
  font-size: 80rpx;
  color: blueviolet;
}

text

1.唯一一个支持选中的。

2.可以解码空格、回车

demo07.wxml

<!--pages/demo07/demo07.wxml-->
<!-- <text>pages/demo07/demo07.wxml</text> -->
<!-- 
  1.selectable:使得text中文字可选中
  2.decode 解码空格、回车
    &nbsb; 代表空格
 -->
<text selectable decode>
text
&nbsp;
text2
</text>

<text decode selectable>
text &nbsp; text2
</text>

个性化样式

可以在页面中的.wxss中设置样式，可以覆盖commen中的样式

下附代码中注释部分即为个性化样式

/* pages/demo07/demo07.wxss */
@import "../../style/commen.wxss"
/* text{
  font-size: 25px;
  color: blueviolet;
} */

image

image标签：scr/mode

插入图片

scr=“ ”插入外网图片，减小内存，引号内插入图片在线链接。

图片链接

来自土豆图床，上传之后，得到图片链接。

图片存在默认大小

demo07.wxss

注意，所有的样式设置全在wxss设置，其中commen.wxss是存放公共样式的地方

页面中的wxss是存放单页的个性化样式的地方

/* pages/demo07/demo07.wxss */
/* @import "../../style/commen.wxss" */
text{ 
  font-size: 25px;
  color: blueviolet;
} 

image{
  box-sizing: border-box;
  border: 1px solid blue;
}

mode：决定图片内容如何与图片宽高做适配

图片过多时：考虑懒加载 lazy-load 具体见文档

轮播图与图片尺寸调整

相关组件：

swiper、swiper-item

wxhl：

<swiper autoplay interval="1000" circular="true" indicator-dots="1"
  indicator-active-color="#002333" indicator-color="#0094ff">
  <swiper-item><image mode="widthFix" src="https://pics.images.ac.cn/image/5f15a930273ff.html"/></swiper-item>
  <swiper-item><image mode="widthFix" src="https://pics.images.ac.cn/image/5f15a9c02790d.html"/></swiper-item>
  <swiper-item><image mode="widthFix" src="http://graph.baidu.com/resource/122bd3152c49820c44a9f01595253631.jpg"/></swiper-item>
</swiper>

autoplay:自动轮播

interval：轮播切换时间 单位：毫秒

curcular：是否自动轮播

indicator-dots：页面小点（指示器）

indicator-active-color：指示器选中颜色

indicator-color：指示器未选中颜色

适应宽度：

采用确定宽度，调整高度的方法。

原图宽/原图高 = swiper宽/swiper高

宽=100%

swiper高 = swiper宽*原图高/原图宽

​ = 100vm *原图高/原图宽

采用calc函数的写法，再给image定义宽度为屏幕宽度

swiper{
  width:100%;
  height: calc(100vm*1800/3200);//原图宽3200 高1800
}
image{
  width: 100%;
}

导航栏设置

功能：实现页面跳转

navigator

wxml：

<!-- 
  导航栏 navigator
  0 块级元素 默认换行 可以直接设置高度、宽度
  1 url 要跳转的页面 的路径  绝对、相对路径均可
  2 target 跳转的页面是自己小程序 还是 其他小程序
      self/miniProgram
  3 open-type 跳转的方式
    navigate（默认值）	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能	
    redirect	对应 wx.redirectTo 的功能	
    switchTab	对应 wx.switchTab 的功能	
    reLaunch	对应 wx.reLaunch 的功能	
    navigateBack	对应 wx.navigateBack 的功能	
    exit	退出小程序，target="miniProgram"时生效	
 -->
 <navigator url="/pages/demo08/demo08">轮播图页面</navigator>
 <navigator open-type="switchTab" url="/pages/index/index">轮播图页面 switchTab</navigator>

注意页面使用“/”

button

基本外观设置

<button>普通按钮</button>
<button size="mini">mini按钮</button>
<button type="primary">button</button>
<button type="primary" plain>button</button>
<button type="primary" loading="1">button</button>

开放功能

<!-- 
  button 开放能力
  open-type
  1 contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明	
  2 share	触发用户转发，使用前建议先阅读使用指引	
  3 getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明	
  4 getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	
  5 launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	
  6 openSetting	打开授权设置页	
  7 feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	
 -->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

获取用户信息 getUserInfo

附加函数 js

// pages/demo10/demo10.js
Page({
  getUserInfo(e){
    console.log(e);
  }
})