【挑战两个月开发自己的小程序】第二期代码集合

1.1 创建小程序项目——纯净环境
1.1.1 把component，.eslintrc.js删掉，然后把pages的index.json中删除 "navigation-bar": "/components/navigation-bar/navigation-bar"；然后删除index.wxss和index.wxml中所有内容。
最后因为要把skyline渲染模式换成webview，所以需要在app.json中删除这些代码：
`"renderer": "skyline",
"rendererOptions": {

"skyline": {
  "defaultDisplayBlock": true,
  "defaultContentBox": true,
  "tagNameStyleIsolation": "legacy",
  "disableABTest": true,
  "sdkVersionBegin": "3.0.0",
  "sdkVersionEnd": "15.255.255"
}

},
"componentFramework": "glass-easel",
`
选删project.config.json和project.private.config.json和sitemap.json（这些删完以后，同理也要去删除引用他们的位置。
要勾选：不校验合法域名、web-view(业务域名）、TLS
版本以及HTTPS 证书（不然不合法）

2 首页的案例
小知识点：
margin和padding
margin我这个箱子和外界之间的距离
padding我这个箱子和内部的组件之间的距离

2.1 button（按钮）组件使用

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
在修改button的颜色的时候，如果加了type（修改颜色），就没法改，因为type的优先级＞background-color（如果要改，也可以，可以写成background-color:red !important;表示优先以这个样式为准）
除了类选择器，还有组件选择器，不用写点，表示修改这个页面中所有的这种组件的样式
例如在index.wxss中写：
`button{
margin-top:300rpx;
}`
表示index.wxml中所有的button组件距离顶部页边距300rpx。

2.2 首页轮播图（swiper+swiper-item）

结构：
`

乘以三
`
swiper组件：
swiper下面只能跟swiper-item组件
在swiper组件中使用autoplay，自动播放
在swiper组件中使用indicator-dots，表示使用指示点
indicator-color="#00FF00"表示指示点颜色（直接写某颜色的英文也可以）
夸克百科，十六进制色值：https://page.quark.cn/baike?id=12e8a61455d2420ab3652972d57506f3
在swiper组件中使用interval='3000'表示轮播间隔三秒（默认是五秒）
circle从最后一个又转回第一个滑动

swiper-item组件:
在这个组件中再写一个image标签，写图片地址，写mode和style，调整，使得其完全适应屏幕

做轮播图，在index.wxml里写：
`<swiper
autoplay="true"
interval="3000"
indicator-dots="true"
indicator-color="#RRGGBB"
circular>

<image src="../../image/swiper/1.png" mode="widthFix" style="width: 100%;"></image>

<image src="../../image/swiper/2.png" mode="widthFix" style="width: 100%;"></image>

<image src="../../image/swiper/3.png" mode="widthFix" style="width: 100%;"></image>

2.3 首页提示版块

结构：
`

乘以八
`

技巧:
在写颜色的部分如果跳出一个颜色方块，可以点击颜色方块，调用自己想要的颜色

做首页提示板块，在index.wxml中写：
`

欢迎使用我们的系统，谢谢~~
`

在index.wxss里写
`.tips{
background-color: #ffeabb63;
color:brown;
font-size:30rpx;
border-radius:50rpx;
/ margin的属性值分别表示距离上下右左的距离值 /
margin:30rpx 10rpx 30rpx 10rpx;
/ padding-left字在盒子内部与边界的距离 /
padding-left: 20rpx;
}`

2.4 flex布局（menu部分布局）

结构：
`

乘以八
`

先让豆包做八张图。等下要做4x2的一个矩形，放8张图片+文字提示

在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;
align-items:center;
width:150rpx;
height:150rpx;
border:rgb(192,251,255) solid 1rpx;
margin:1rpx;
background-color: rgb(156, 255, 94);
}
.img{
width:88rpx;
height:88rpx;
border-radius:10rpx;
}
.title{
margin-top:12rpx;
font-size:24rpx;
}`

2.5 通知布局

结构：
`

`

一个图片（图片让豆包生成）一个文字的公告

小知识点：
选择一个选择器下的组件，如类名：notice下的
写代码如下：
.notice>text{
}

在index.wxml中写
`

通知公告
`

在index.wxss中写

`.notice{
display:flex;
justify-content:flex-start;
margin-top:20rpx;
margin-bottom: 20rpx;
}
.notice>text{
flex-grow:1;
font-size:70rpx;
}`

2.6 底部布局

结构：
`

乘以四
`

放四张图片（2x2布局）

小技巧：
格式化代码，可以让布局更加规范整齐

在index.wxml中写
`

`

在index.wxss中写
`.bottom{
display: flex;
justify-content:space-between;
flex-wrap:wrap;
}
.bottom>view>image{
width:345rpx;
height:200rpx;
padding:10rpx;
}`

3 小程序中引入矢量图
打开iconfont官网，注册一个账号，搜素想要的图标，选择心仪的图标，加入购入车，添加进项目，在项目里找到”项目设置“（灰色），选择Base64，保存。然后点击复制代码，放到搜索栏。
在项目中新建文件夹wxss，然后在里面放font.wxss文件，再把刚才复制的代码放到font.wxss中，这样写的作用时什么呢？如果你的所有样式都写在app.wxss，那里面的样式会变得非常多，不便于管理，把font放在font.wxss，只需要引用，就能使得文件更加整齐划一。
引用的方法：
在app.wxss中写:
@import "./wxss/font.wxss";
然后font.wxss中有一些类名，只需要写在需要添加图标的组件的类名中就好了
例如，在font.wxss中有如下代码，这个代码看着很吓人，其实只用关注最底部这些类名，拉到最下面，两个类名，一个是iconfont，另一个是icon-tishi，把这两个类名写在同一个组件中，就能在组件中看到相应的图标了。然后，在index.wxml写一个text组件：
<text class="iconfont icon-tishi"></text>
这样就能看到图标了。
` @font-face {
font-family: "iconfont"; / Project id 5126894 /
src:

   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAM0AAsAAAAAByAAAALnAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqCHIIcATYCJAMICwYABCAFhGcHLxtXBsi+QDaGA61+0oYILVOzsZk41ztpIyffLVD4eYt4eFr737mzs/Ndk2DazDx9GkksqqQMJYtWPHTewOn2rvj9vcfhpe1T53N0RbIwkQLMwrI0amlNUwZVFaFK7MrbFNpinjA/UjfX1ar3azNojNTrja7UXT2gEPiviZ7e73XlcfW1HsExalQAuf//veP/a4tfAG/NQWtTPQvzgD5QYy2LsJMXGLfI7grEIp8RaLVYBbRx/fQKxekjW9CAMNuDJD2mVfkIacEryzjRLBTo0iyeqkn30h14Erw//ulGmqSumFl7L68uEL7PWyMQDUH1nRivCg9PqFFh/sr0cbDZulssis4Ha62yxk2Q8iz4GbzHXfcfjyAKM7UdjGPuOfEc/qn+MoGMgsvAjV7XUvpl6uSv5G8fPwZ899OnNvbBhw+id96/P11edN/fnWhZEbTlHryJ30/z/qi313ff6K5Xd16eSCQvq9m1bF4cMVruvlYa5yfd/tdIxx55X11W2Oxmsrq1aSGIJ1ub5fcumHLvPBuOvLf0nRBf53e+4EKQvHZci2cderil8ndhct/xV8JtnHXJT7+ES5nXBqQy2lqAxuq/qv6A73jnU/el+c1tGfy4DxK4GzPA7IDmM7QGr1t2EojMmo+Uq3hCMrkseQfiVitAg+ns9eqr7LutZGjWd3P2JmMJVJpNYJkyF2ptlkLRbBW0mqe9uk2fiZjILZhphyB0u0LS6S1Uuj2wTHlCbdAHim5/aHU4Ctu1mRnnhUdHpgsGW8xD25JsBQdEn0kOjKNXFnonz1dxAHVFyyc2ZJE3xIz5Su4uFhImM9vEDncaGYaNk5mt0Zmb2YKdqaomVS9phmMTFjzkiJELFPiGcmc2i+ShOft5z4gsYDjygNh71ONTMXGkU2gAbCO1QHVXssvcB1nXApOghIfiJtQRzMRQozY0qR6kIWesKesRdkypFiqBSpvzy81H2wGtTFUKq0+lvqr6igoAAA==') format('woff2'),
   url('//at.alicdn.com/t/c/font_5126894_c9ddlrup08.woff?t=1772119451957') format('woff'),
   url('//at.alicdn.com/t/c/font_5126894_c9ddlrup08.ttf?t=1772119451957') format('truetype');

}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-tishi:before {
content: "\e662";
}`

4 事件绑定
4.1 按钮等某些组件点击以后，能触发事件执行xx.wxml的某个组件写属性bind:TT="tt"，（TT和tt分别表示某一事件以及变量名。然后在xx.js的Page({})中书写代码
在my.wxml中写：
`===事件绑定===
`
在my.js中写：
`Page({

data: {}
handleConsole(){
console.log("我被点了")

},
})`
4.2 事件冒泡
父组件有子组件,子组件上有事件，父组件上也绑定了事件
点击子组件时子组件事件触发，父组件事件也会触发，这个称为事件冒泡。
在my.wxml中写：
`===事件冒泡===

`

在my.js中写：
`handleParent(){

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

4.3 事件对象-传参
4.3.1 当绑定了事件后-->函数都是可以接收一个对象，事件对象叫做event
4.3.2 传参-->放到event事件对象中-->js中可以取出来使用
wxml能触发事件的组件，添加这些自定义属性，他们的信息就会被记录到event中
data-* 自定义名字
mark: 自定义属性
方法一:
在my.wxml中写：
<使用data-，给元素绑定自定义数据的固定参数，可以通过这种方式在调试器的Console的,然后在my.js中给事件加个参数event，然后console.log(event.target.dataset.id)，(event.target.dataset.id)中event后半部分根据需求任改 -->

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

在my.js中写：

`handleClick01(event){
  console.log(event);
  console.log(event.target.dataset);
  console.log(event.target.dataset.id);
  console.log(event.target.dataset.name);
  console.log(event.mark.name);
}`

方法二:
在my.wxml中写：

<view bind:tap="handleClick01" mark:name="2001">点我2</view>
在my.js中写：
` handleClick01(event){

  console.log(event.mark.name);
}`

5 页面跳转
小技巧：JavaScript（js）对字符串的单 / 双引号没有强制限制，单引号（'）和双引号（"）都可以用
5.1 组件跳转（声明式导航）
5.1.1 navigation组件，加属性-->实现跳转
my.wxml中加入跳转登录页，注意url先带斜杠后写地址
`

`
5.1.2 更多跳转方式（open-type）
navigator组件的其他属性
open-type="(填入下列属性值)"
1.navigate（默认值）:保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar.list的子页面
2.redirect：关闭当前页面，跳转到应用内某个页面，但是不能跳转到tabbar.list的子页面
3.switchTab：跳转到tabBar页面，并关闭其他所有非tabBar.list子页面的页面
4.reLaunch：关闭所有页面，打开应用内的某个页面
5.navigateBack：关闭当前页面，返回上一页面或上多级页面
示例：
在my.wxml中写：
`===页面跳转（声明式导航）===

`

`

`

新增一个页面login,在login.wxml中写：

`login

`
注意，如果使用open-type="navigateBack" delta="2",可以一次性返回两次页面。

5.1.3 跳转携带参数
介绍onLoad在页面跳转传参场景下的含义：onLoad(options)是专门用来“接住“发起页通过导航URL传递过来的参数的”容器“
跳转以后，再目标页面的.js中的onLoad(options){};中获取参数
具体来说，就是这样补写代码:
`onLoad(options){
console.log(options)
};`
然后控制台就能把你携带的参数给带过来

5.2 js跳转（编程式导航）
5.2.1 使用js控制跳转
原理：在wxml中写按钮，按钮绑定事件，然后在js中写事件如何跳转页面，点击按钮实现功能
5.2.2 5个方法-->和声明式导航跳转是对应的
`wx.navigateTo({
url:'url',
})
wx.redirectTo({
url:'url',
})
wx.switchTab({
url:'url',
})
wx.reLaunch({
url:'url',
})
wx.navigateBack()`

在my.wxml中写：
`===页面跳转（编程式导航）===

`
在my.js中写：
`handlenavigateTo(){

  wx.navigateTo({
    url:'/pages/login/login',
  })
},
handleredirectTo(){
  wx.redirectTo({
    url:'/pages/login/login',
  })
},
handleredirectTo(){
  wx.redirectTo({
    url:'/pages/login/login',
  })
},
handleswitchTab(){
  wx.switchTab({
    url:'/pages/index/index',
  })
},
handlereLaunch(){
  wx.reLaunch({
    url:'/pages/index/index',
  })
},`

此外，如果你想让你的目标页面获取my.js的参数，可以在URL中填入当前页面的各种信息。如，第一个页面中的URL中写一个叫张三的人，爱好是游泳，在第一个处理函数中修改成这样
`handlenavigateTo(){
wx.navigateTo({

url:"/pages/login/login?name=zhangsan&hobby=swim",

然后，修改目标页面js中的onload(){},
假设要跳转到login
那么就修改login.js
`onload(options){
console.log(options.name);
console.log(options.hobby);
},`
options用于存放刚才解析过来的URL信息。

在login.wxml中写：
<button type="warn" bind:tap="handlenavigateBack">navigateBack</button>
在login.js中写：
` handlenavigateBack(){

wx.navigateBack({
      })

},`

6 wxml语法
6.1 模板语法
在login的js文件中定义的变量想在页面中展示，这就涉及到wxml模板语法了。
为了后续操作方便，接下来，来到登录界面，设置登录界面为启动界面。
6.1.1 在页面xx.js的Page()方法的data对象中进行声明定义
6.1.2 在xx.wxml中使用{{}}包裹，显示数据
6.1.3 可以显示变量、算数运算、三元运算、逻辑判断，不能编写js语句或js方法