02-小程序(swiper,navigator组件 wx:key的设置,编程式导航,事件方法传参,事件对象event的target与currentTarget,编译模式的设置,英雄案例,小程序上线步骤

本文链接：https://blog.csdn.net/Tangoneone/article/details/106986853

01-轮播图组件

小程序提供除了基本的标签之外，还提供很多稍复杂一些的组件，包括：轮播图组件，横向滚动，进度条等等。。。

轮播图组件使用
在这里插入图片描述

参考官方示例代码

   <!-- 
     indicator-dots	:是否显示面板指示点
     indicator-color	: 指示点颜色
     autoplay: 是否自动切换
     indicator-color: 指示点颜色(透明)
     indicator-active-color: 当前选中的指示点颜色
     interva: 切换时长
     duration 动画的时长
     circular 是否循环
    -->
   <swiper indicator-dots autoplay indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#fff" interval="1000" duration="1000" circular>
   	<block wx:for="{{imgArr}}" wx:key="*this">
   		<swiper-item>
   			<image src="{{item}}"></image>
   		</swiper-item>
   	</block>
   </swiper>

提示：

block包裹作用，可以放wx:if和wx:for，最终并不会渲染。相当于vue template标签
w3c规范，如果属性是boolean，只给属性不给值，默认就是true

02-wx:key的设置(了解)

现象：如果不设置wx:for的key值，会报警告，警告提示：添加key提升性能

如何添加？

<!-- 如果填index的话会导致如果给数组添加成员的话下标会有问题 -->

<!-- 如果wx:for遍历数组的每一项是对象的话，那么wx:key设置元素一个属性名，要求属性对应的值是唯一的 -->
<view wx:for="{{objectArray}}" wx:key="id">
{{item.unique}}
</view>

<!-- 
  如果wx:for遍历数组，每一项不是对象的话，如果想给wx:key唯一标识，wx:key="*this"
  相当于vue :key="item"
 -->
<view wx:for="{{numberArray}}" wx:key="*this">  
{{item}}
</view>

问题：在vue vfor里面是不是总是要设置key为唯一标识？

如果数组元素下标并不会变化，给index就够了。
1. 防止报错
如果数组元素下标有变化的话，才需要给唯一标识

03-navigator组件

传送门

概念：跳转页面

如何使用

结构中声明跳转页面

url的路径推荐用绝对路径,以/打头

<navigator url="/pages/login/login?参数1=值&参数2=值">点我跳转登录页</navigator>

在目标页面获取参数

Page({
	onLoad(options){
        options.参数1 // 来获取传参
    }
})

注意点：

在模拟器的页面参数里，可以看到传参，用于定位错误

04-编程式导航

在这里插入图片描述
回顾vue路由

声明式导航
1. 声明在html里面
```
<router-link to="/sing"></router-link>
```
编程式导航
1. js里面
```
router.push('/sing')
```

概念：用js的方式跳转页面

如何使用

1. url和声明式完全一致

wx.navigateTo({
    url: '/pages/login/login?name=joven',
})

使用场景

如果跳转之前有前置逻辑的话，必须用编程式导航

05-事件方法传参

在注册事件所在的dom上，添加属性

<button bindtap="toLogin" data-属性名="值">点我去登录</button>

在事件处理方法里面，获取到传参

dataset固定写法，不能改

toLogin(event){
    let  name = event.currentTarget.dataset.属性名 //获取参数
    wx.navigateTo({
        url: '/pages/login/login?name='+name,
    })
},

注意点:

事件注册bind事件名="事件处理方法，不能写行内逻辑，也不能传参"

06-事件对象event的target与currentTarget

结论

target是指向事件源
currentTarget指向注册事件所在的dom

在这里插入图片描述

总结：

如果总是在注册事件所在的dom上传参的话，直接取currentTarget
在小程序里面也是有事件冒泡的

07-编译模式的设置

作用：设置微信开发者工具模拟器的默认首页的

如何使用：

点击工具栏，普通编译，选择添加编译模式, 弹框主要有三个选项
1. 启动参数的形式key=value&key1=value

08-lol英雄列表案例要注意的地方

08.1导航区设置

在这里插入图片描述
传送门

//navigationBarBackgroundColor 背景色
// navigationBarTextStyle 前景色，只支持white/black
// navigationBarTitleText 导航栏文案

{
  "navigationBarBackgroundColor": "#354559",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "英雄列表"
}

注意点：

页面配置配置在页面下的*.json里面
页面配置就是一个json对象，不需要window这个key
页面配置优化级大于全局配置app.json的window里面配置
导航栏文字在微信开发者工具的模拟器是居中的，iOS也是居中的，安卓是居左

08.2详情页-跳转逻辑

在这里插入图片描述

点击英雄跳转英雄详情
1. 新建detail页面，并添加路径
2. 点击英雄 bindtap: toDetail
3. 使用编程式导航wx.navigateTo
跳转英雄详情，带id参数
1. 分析：点击英雄传递id，然后在lol_details_duowan.js找到一个对象的id为id参数的，进行渲染
2. 在注册toDetail所在的dom上传递data-id
3. 在toDetail获取id的值，并通过wx.navigateTo的url参数上传递id
4. 在页面参数检验参数传递是Ok的
在目标页面detail的onLoad获取到参数
添加编译模式,这样一打开就是先在detail页面而不是主页home
1. 添加启动参数 id=zoe

08.3进度条progress组件

progress

percent进度条百分比
stroke-width 进度条高度
activeColor 已选中的颜色
backgroundColor 背景色
active 开启动画
duration 进度增加1%所需毫秒数

 <progress percent="100" stroke-width="12" activeColor="#cb8eff" backgroundColor="#363636" active duration="10"></progress>

08.4详情页-导航区设置

在这里插入图片描述

导航栏前景色和背景色设置到全局app.json window
导航栏标题需要动态设置，在文档api里面有个wx.setNavigationBarTitle
避免页面跳转时，导航栏wechat文字一闪而过，在app.json window导航栏文字设置为空

在这里插入图片描述

09-小程序版本

开发版本
1. 微信开发者工具，预览扫描，在手机微信上看到就是开发版本
2. 访问权限：项目成员才可以访问
体验版本
1. 上传代码可以选为体验版本
2. 体验版本一般是老板客户和产品来体验小程序的，比开发版本更接近于上线版本
3. 访问权限：作为体验成员才可以访问
上线版本
1. 上传代码，审核通过过后，再发布上线
2. 访问权限，所有人都可以访问

10-小程序上线步骤

先确定微信开发者工具里面填写你的appid
1. 如果是测试号的话，微信开发者工具没有上传按钮

在这里插入图片描述

在微信开发者工具上，点击上传按钮
在小程序后台->版本管理->开发版本，可以选为体验版本（可选）
提交审核，在打开的页面里面设置
1. 版本描述，给客服看看
2. 测试账号，如果小程序有部分功能需要登录才可以看到的话，一定要提供账号
等待审核通过，如果审核通过的话，会给小程序的管理员消息的。然后你可以进入小程序后台，点击提交发布
1. 审核时间一般2小时以内
如果提交发布，搜索你的小程序
1. 在小程序后台，设置里面找到你的小程序名字
2. 在微信上，发现->小程序->搜索你的小程序名字