黑马微信小程序学习

pages

其里面的每一个文件夹路径就是一个个展示的页面
从前到后的顺序就是依次展示顺序

07组件-view和scroll-view组件基本使用

7.1 view 小示例

某个页面路径里的list.wxml代码控制页面的结构

<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>

某个页面路径里的list.wxss代码控制页面的具体样式

/*总体设置长宽高*/
.container1 view{ /*.点出container 类*/
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*设置每一个展示块的颜色*/
.container1 view:nth-child(1) {
background-color: lightgreen;
}
.container1 view:nth-child(2) {
background-color: lightskyblue;
}
.container1 view:nth-child(3) {
background-color: lightpink;
}
/*设置水平排列、保持一定间距*/
.container1 {
display: flex;
justify-content: space-around;
}

7.2 scroll-view 滚动示例

某个页面路径里的list.wxml代码控制页面的结构

/*使用scroll-view， 并且说明滚动的方向,y方向还是x方向*/
<scroll-view class="container1" scroll-y="y">
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

某个页面路径里的list.wxss代码控制页面的具体样式

/*总体设置长宽高*/
.container1 view{ /*.点出container 类*/
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*设置每一个展示块的颜色*/
.container1 view:nth-child(1) {
background-color: lightgreen;
}
.container1 view:nth-child(2) {
background-color: lightskyblue;
}
.container1 view:nth-child(3) {
background-color: lightpink;
}

.container1 {
border: 1px solid red;/*设置边线和边距1个像素*/
width: 100px;
height: 150px;
}

8.1 swiper 轮播图

list.wxml控制页面的结构

<swiper class="swiper-container">
/*有多少个轮的就要有多少个<swiper-item>*/
/*第一个轮播图*/
<swiper-item>
    <view class="container1">A</view>
    /*轮播图片或者文字, 一般会用图片,这里用view*/
</swiper-item>
/*第二个轮播图*/
<swiper-item>
    <view class="container2">B</view>
</swiper-item>
/*第三个轮播图*/
<swiper-item>
    <view class="container3">C</view>
</swiper-item>
</scroll-view>

lis.wxss控制各个展示项目的样式

/*设置总的swiper样式*/
.swiper-container{
  height: 150px;
}
/*设置每一个item的样式，可以将多个item class命名为一样的，这样可以一次性统一设置*/
.container1{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
.container2{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
.container3{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .container1{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .container2{
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .container3{
  background-color: lightpink;
}

可以将多个item class命名为一样的，这样可以一次性统一设置：

8.2 swiper 组件的属性常用

swiper 组件的属性常用：

8.2.1 使用

list.wxml控制页面的结构

<swiper class="swiper-container" 
indicator-dots               /*轮播的小圆点*/
indicator-color="white"      /*未选中小圆点颜色，选中默认为黑*/
indicator-active-color="red" /*设置选中小圆点颜色/
autoplay                     /*设置自动轮播/
interval="多少毫秒"           /*设置轮播切换的时间间隔/
circular>                    /*设置循环播放/
/*有多少个轮的就要有多少个<swiper-item>*/
/*第一个轮播图*/
<swiper-item>
    <view class="container1">A</view>
    /*轮播图片或者文字, 一般会用图片,这里用view*/
</swiper-item>
/*第二个轮播图*/

9 text 和 rich-text组件的基本用法

9.1 只有text selectable才能长按选中

list.wxml

<view>
手机号支持长按选中效果
<text selectable> 13800005056</text>
/*必须是text下的selectable模式才行*/
</view>

9.2 通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI机构

<rich-text nodes="<h1 style='color:red;'>html待渲染的文字内容
                  </h1">
 /*使用nodes
双引号里不能再使用双引号了，只能使用单引号
h1 用户给他设置html的样式*/
</rich-text>

10 button 和 image 组件

10.1 button外观属性

refer: https://blog.youkuaiyun.com/m0_45432976/article/details/122020571

属性	类型	默认值	必填	说明
size	string	default	否	按钮的⼤⼩
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景⾊透明
disabled	boolean	false	否	是否禁⽤
loading	boolean	false	否	名称前是否带loading图标
form-type	string	否	⽤于组件，点击分别会触发组件的submit/reset事件
open-type	string	否	微信开放能力

10.2 button size的合法值

值	说明
default	默认⼤⼩
mini	⼩尺⼨
type的合法值

值	说明
primary	绿⾊
default	⽩⾊
warn	红⾊
form-type 的合法值

值	说明
submit	提交表单
reset	重置表单
open-type 的合法值

值	说明
contact	打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息
share	触发⽤⼾转发，使⽤前建议先阅读使⽤指引
getPhoneNumber	获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息
getUserInfo	获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息 launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数
penSetting	打开授权设置⻚
feedback	打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登 录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

10.3 image 组件

图⽚标签，image组件默认宽度320px、⾼度240px
⽀持懒加载

属性名	类型	默认值	说明
src	String		图⽚资源地址
mode	String	scaleToFill	图⽚裁剪、缩放的模式
lazy-load	Boolean	false	图⽚懒加载

image-mode的类型：

list.wxml设置结构

<image></image> <!--空image也会占据展示位置-->
<image src="/pages/image/mult_one_heart.jpg" mode="aspectFill"></image>
<!--src="指定image的位置路径" mode="指定填充的样式"-->

list.wxsss设置具体样式

image{
border: 1px solid red; <!--设置边框:边距、实线、颜色-->
}

14 小程序版本和发布

14.1 小程序的版本

14.2 小程序的发布

上传代码 —> 上传为开发版本 —> 腾讯审核 —> 可发布

15 小程序推广

小程序码推广：获取小程序码

19 数据绑定

19.1 数据绑定原则：

19.1.1 在 data 中定义数：

在页面对应的.js文件中，把数据定义到data 对象中

Page({
  /* 页面的初始数据  */
  data: {
  /* 定义字符串类型的数据*/
  info:'init data',
  /* 定义字符串类型的数据*/
   msgList:[{msg:'hello'},{msg:'world'}]
   
    motto:'hello world',
    imageSrc:'/pages/image/mult_one_heart.jpg'
  },
  ...
  })

19.1.2 在wxml 中使用数据-mustache语法{{}}

mustach语法{{}} 也叫做插值表达式

<view>{{motto}}</view>
<image src="{{imageSrc}}" mode="widthFix"></image>
<!--mustach语法{{}}被应用的地方有引号的得加上引号
src="指定image的位置路径",
mode="指定填充的样式"-->

19.2 mustache语法{{}}

mustache语法{{}} 也叫做插值表达式

19.2.1 mustache应用场景

绑定元素：19.1.2 的{{motto}}
绑定属性：19.1.2 的<image src=“{{imageSrc}}”
运算（三元运算、算数运算等）:

<view>{{ randNumber1 >= 5? 'LE5' : 'LES5' }}</view>
<view>{{ randNumber2 * 100 }}</view>
  data: {
  randNumber1 : Math.random() * 10 /*生产0-1随机数*10*/
  randNumber2: Math.random().toFixed(2) /*生产两位小数*/
  }

34-35 配置网页请求地址

https://www.escook.cn/

需要微信扫码，注意一个月只能修改5次

35 request请求的注意事项

对于只用于测试而非上线的网站，可以不一定是https的，可以如下设置：
微信开发小程序 —> 打开某一个项目 —> 右上详情 —> 本地设置 —> 勾选不校验合法域名、web-view选项

36 本地生活宝首页实例

总的结构图：

Home.js:

data: {
  swiperList:[],
  ninePicture:[]
  },
//获取轮播图数据函数
getSwiperList(){
  wx.request({
    url: 'https://www.escook.cn/slides',
    method:'GET',
    success:(res)=>{
      console.log(res.data),
      this.setData({
        swiperList:res.data
      })
    }
  })
},
//获取九宫格图数据函数
getNinePicture(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method:'GET',
      success:(res)=> {
          console.log(res.data),
          this.setData({
            ninePicture:res.data
          })
      }
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList(),
    this.getNinePicture()
  }

36.1 TabBar的多个页面

app.json里配置页面和函数

 "pages":[
    "pages/home/home",
    "pages/massage/massage",
    "pages/contact/contact",
    "pages/list/list",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0000FF",
    "navigationBarTitleText": "心集团",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "家",
      "iconPath": "/pages/image/home.jpg",
      "selectedIconPath": "/pages/image/home_active.jpg"
    },{
      "pagePath": "pages/massage/massage",
      "text": "信息",
      "iconPath": "/pages/image/car.png",
      "selectedIconPath": "/pages/image/car_active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "我们",
      "iconPath": "/pages/image/contact.jpg",
      "selectedIconPath": "/pages/image/contact_active.jpg"
    }]
  },

36.2 首页轮播图

Home.wxml:

<swiper class="swiper_class" indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
  <image src="{{item.image}}" mode="widthFix"></image>
</swiper-item>
</swiper>

36.3 首页九宫格图

Home.wxml:

Home.wxml:

<view class="view_class">
  <view class="view_item" wx:for="{{ninePicture}}" wx:key="id">
   <image src="{{item.icon}}"></image>
   <view>{{item.name}}</view>
</view>
</view>

Home.wxss:

.view_class{
  display: flex;
  flex-wrap: wrap;
  border-top:1rpx solid lightpink;
  border-left: 1rpx solid lightpink;
}
.view_item {
  width: 33.33%;                    /*每一个Item张33.33%*/
  height: 200rpx;                   /*指定每一个Item的高度*/
  display: flex;                    /*Item里的东西flex*/                   
  flex-direction: column;           /*Item里的东西flex的方向*/
  align-items: center;              /*Item里的东西水平方向居中*/
  justify-content: center;          /*Item里的东西上下方向居中*/
  border-bottom:1rpx solid lightpink;
  border-right: 1rpx solid lightpink;
  box-sizing: border-box;          /*边界与边框线共用，缩小尺寸*/
}
.view_item image{                  /*控制当个item下的 image*/
  height: 60rpx;                   /**/
  width: 60rpx;                    /**/
}
.view_item text{                 /*控制当个item下的 text*/
  font-size: 24rpx;              /**/
  margin-top: 10rpx;             /**/
}

36.4 首页底部两图

Home.wxml:

<view class="view_2p">
  <image src="/pages/image/car1.jpg"></image>
  <image src="/pages/image/pay.jpg" > </image>
</view>

Home.wxss:

.view_2p{                         /*调整两图上一级的整体view*/
  display: flex;                  /*两图水平布局*/
  justify-content: space-around;  /*两图之间水平按着间接分开*/
  margin-left: 10rpx;             /*左边距*/
  margin-top: 10rpx;              /*上边距*/
}
.view_2p image{                   /*调整单独的图片的样式*/
  height: 175rpx;                 /*各个图片的高度*/
  width: 300rpx;                  /*各个图片的宽度*/
  border: 10rpx solid lightpink;  /*各个图片的边框*/
}