微信小程序开发01_小程序开发 csdn-优快云博客

前言

本文为微信小程序开发自用笔记（学习视频参考B站视频：BV1EFcve9EH1）

在正式内容开始前，默认已经注册好微信小程序账号，下载安装好微信开发者平台以及准备好各项外观（如代码字符大小等...）调试。

pages文件名称	功能
js	js代码
json	写一些配置文件
wxml	主要写样式，原来html的东西（页面布局）
wxss	写css样式

一、小程序样式

1.1 创建纯净环境（小程序项目）

① .eslintrc.js 删除

② component 文件删除（暂时用不到）

③ index.json 中删掉 "navigation-bar" 那行代码（否则报错）

④ index.wxss 样式全部删除（目前不需要）

⑤ index.wxml 样式全部删除（同样不需要）

⑥ app.json 的 skyline 模式删除（render 、componentFramework 去掉）这样换成webview模式，就不会报 skyline 的问题

⑦ app.wxss 样式全部删除

⑧（选做）project.config.json 、project.private.config.json 、sitemap.json 可删可不删（需要干净环境可全删）

⑨（前提做了⑧）app.json 有关 sitemap.json 和 requiredComponents 的代码删除

1.2 尺寸单位

①小程序中，由于手机屏幕大小可能不一样 —> 容易导致px像素会有问题。

②因此长度宽度统一使用rpx（不使用px）

1.3 全局与局部样式

①全局样式（app.wxss）：在这里写css样式，整个小程序都生效。

.myview {
  height: 500rpx;
  width: 750rpx;
  background-color: aquamarine;
  font-size: larger;

}

②局部样式（页面.wxss）：同样在这里写css样式，只有当前页面生效。

.myview{
  background-color: rebeccapurple;
}

二、制作首页样式

2.0 内置组件对照（wxss -> css）

# text      span
# view      div
# image     img
# icon      提示

2.1 button (按钮) 组件的使用

①在页面.wxml中

<button size="mini" type="default" plain class="mybutton">按钮1</button>
<button size="mini" type="warn" plain>按钮2</button>
<button size="mini" type="primary" plain>按钮3</button>

②在页面.wxss中标签选择器

button{
  /* 距离顶部30rpx */
  margin-top: 30rpx;
  /* 距离底部30rpx */
  margin-bottom: 30rpx;
/* ！important: 优先以这个样式为准 */
  background-color: greenyellow !important;
}

③其它属性，可参照官网

例：

（1）按钮带加载

（2）按钮不可点击

2.2 swiper + swiper-item组件（滑动模块、轮播图）

2.2.1 index.wxml

<swiper autoplay indicator-dots circular indicator-color='#FFFFF'>
    <swiper-item>
      <image src="/images/b1.png" mode="widthFix" />
    </swiper-item>
    <swiper-item>
      <image src="/images/b2.png" mode="widthFix" />
    </swiper-item>
    <swiper-item>
      <image src="/images/b4.png" mode="widthFix" />
    </swiper-item>
  </swiper>

2.2.2 把轮播图放在images/banner目录下

2.3 首页提示模块

## index.wxml

<view class="tips">
  <text class="iconfont icon-tishi icon"></text>
  <text>欢迎使用本系统</text>
</view>



## index.wxss

.tips{
  /*背景色*/
  background-color: greenyellow;
  /*字大小*/
  font-size: 30rpx;
  /*字颜色*/
  color: #1f1e33;
  /*圆角效果*/
  border-radius: 50rpx;
  /*距离上下右左距离*/
  margin:30rpx 10rpx 30rpx 10rpx; 
  padding-left:235rpx ;
}

2.4 初步flex布局

① index.wxml

#index.wxss


/*flex布局*/
.menu{
  display: flex;
  justify-content: space-between;
  padding: 16rpx;
  border-radius: 10rpx;
  flex-wrap: wrap;

}

.item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 150rpx;
  height: 200rpx;
  border: greenyellow solid 1rpx;
  margin: 1rpx;
  background-color: powderblue;
}
.img{
  width: 88rpx;
  height: 88rpx;
  border-radius: 10rpx;
}
.title{
  margin-top: 12rpx;
  font-size: 35rpx;
}

2.5 通知布局

## wxss

.notice{
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;
  font-size: 50rpx;
}

.notice>text{
  flex-grow:1;
  font-size: 40rpx;
}



## wxml

<view class="notice">
  <image src="/images/menu/公告.png" mode="aspectFit" style="width: 200rpx; height: 100rpx;" />
  <text>通知公告</text>
</view>

2.6 底部布局

## wxss

.bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.bottom>view>image{
  width: 345rpx;
  padding: 10rpx;
  height: 200px;
}


## wxml

<view class="bottom">
  <view>
    <image src="/images/menu/cute.png" mode="scaleToFill" />
  </view>
  <view>
    <image src="/images/menu/cute2.png" mode="scaleToFill" />
  </view>
  <view>
    <image src="/images/menu/cute3.png" mode="scaleToFill" />
  </view>
  <view>
    <image src="/images/menu/cute4.png" mode="scaleToFill" />
  </view>

</view>

三、引入矢量图

①推荐使用阿里矢量库图标

（1）打开 https://www.iconfont.n/

--注册成功

（2）搜索想要的图标

--加入购物车

--在购物车中添加至项目

（3）我的项目 -> 项目设置 -> 打开base64

（4）选择font class -> 生成代码 -> 点击链接地址打开

（5）把打开的链接地址复制到项目中

-static/css/iconfont.wxss

（6）在app.wxss中引入

@import "/static/css/iconfont.wxss";

（7）在想用图标的位置，加入text组件

<text class="iconfont icon-anquan">

四、事件绑定

① 按钮，某些组件 -> 点击 -> 触发事件执行

--打印内容

--向后端发送请求

......

② 最简单的应用

（1）wxml 中

<button type="warn" plain size="mini" bind:tap="handleConsole">点击控制台打印</button>

（2）js 中

Page({
  handleConsole(){
    console.log('我被点了')
  },

（3）bind:tap="handleConsole" 可以简写 bindtap="handleConsole"（去掉：）

③ 事件冒泡：

（1）父组件 -> 套了子组件

--子组件上有事件

--父组件上也绑定了事件

--点击子组件 -> 子组件事件触发 -> 父组件事件也会触发

（2）阻止事件冒泡

## js

    handleParent(){
      console.log("父亲被点了")
    },
    handleChildren(){
      console.log("孩子被点了")
    },


## wxml

<view style="height: 400rpx;width: 750rpx; background-color: pink; display: flex; justify-content: center; align-items: center;" bind:tap="handleParent">

<button type="primary" plain bind:tap="handleChildren">按钮1</button>
<button type="primary" plain catch:tap="handleChildren">阻止事件冒泡</button>
</view>

④事件对象-传参

（1）当绑定了事件后 -> 函数都是可以接收一个参数事件对象(event)

（2）传参 -> 放到event事件对象中 -> js中可以取出来使用

data- *方案

mark:自定义属性

（3）代码

## js

    handleClick01(event){
      //如果有事件冒泡--> 他们里面的值是不一样的
      //currentTarget:事件绑定者---> view
      //target: 事件触发者---> button
      console.log(event.target.dataset)
      console.log(event.target.dataset.name)
    },

## wxml

<view bind:tap="handleClick01" data-id='1001' data-name='justin' mark:name='xxx'>点我</view>

五、页面跳转

5.1 组件跳转（声明式导航）

① navigator 组件，加属性 -> 实现跳转

② 最基本的跳转

<navigator url="/pages/login/login" open-type="navigate"><button type="primary" plain>去登录2</button></navigator>

③ 更多跳转方式 -> open-type属性

跳转方式	open-type属性
navigate（默认）	保留当前页面，跳转到应用内的某个页面。但是不能跳转到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
switchTab	跳转到 tabBar 页面，并关闭所有其他的非 tabBer 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面

④ 代码展示

<navigator url="/pages/login/login?name=justin&age=19"><button type="primary" plain>去登录</button></navigator>
<navigator url="/pages/login/login" open-type="navigate"><button type="primary" plain>去登录2</button></navigator>
<navigator url="/pages/login/login" open-type="redirect"><button type="primary" plain>去登录3</button></navigator>
<navigator url="/pages/index/index" open-type="switchTab"><button type="primary" plain>去首页</button></navigator>

⑤跳转携带参数

--跳转

<navigator url="/pages/login/login?name=justin&age=19"><button type="primary" plain>去登录</button></navigator>

--另一个页面获取：js

onLoad(options){
   console.log(options)
},

5.2 js跳转（编程式导航）

① 使用js控制跳转

② 5个方法 -> 跟上面是对应的

    handlenavigateTo(){
      wx.navigateTo({
        url: '/pages/login/login?name=xxx&hobby=fly',
      })
    },
    handleredirectTo(){
      wx.redirectTo({
        url: '/pages/login/login',
      })
    },
    handleswitchTab(){
      wx.switchTab({
        url: '/pages/index/index',
      })
    },
    handlereLaunch(){
      wx.reLaunch({
        url: '/pages/login/login',
      })
    },

六、简单的wxml语法

6.1 模板语法

① 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义

② 在 xx.wxml 中使用 {{}} 进行包裹，显示数据

③ 可以显示如下语法，不能编写js语句或js方法

--变量

--算数运算

--三元运算

--逻辑判断

<text>模板语法</text>
<view>
<view>名字是：{{name}}</view>
<view>年龄是：{{age}}</view>
<view>爱好是：{{hobby}}</view>
</view>

<view>
<view>元左右信息显示---对象</view>
<view>名字是：{{userinfo.name}}</view>
<view>性别是：{{userinfo.gender}}</view>
<view>年龄是：{{userinfo.age}}</view>
</view>

<view>{{animals[0]}}----{{animals[1]}}----{{animals[2]}}</view>

<view>算数运算:{{99+1}}</view>
<view>三元运算:{{num>999?'真':'假'}}</view>
<view>逻辑判断:{{num>9}}</view>