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

01-轮播图组件

传送门

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

轮播图组件使用

1. 参考官方示例代码

   <!-- 
     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>

提示：

1. block包裹作用，可以放wx:if和wx:for，最终并不会渲染。相当于vue template标签
2. 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为唯一标识？

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

03-navigator组件

传送门

概念：跳转页面

如何使用

1. 结构中声明跳转页面

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

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

2. 在目标页面获取参数

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

注意点：

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

04-编程式导航

回顾vue路由

1. 声明式导航

   1. 声明在html里面

   <router-link to="/sing"></router-link>
   

2. 编程式导航

   1. js里面

   router.push('/sing')
   

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

如何使用

​ 1. url和声明式完全一致

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

使用场景

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

05-事件方法传参

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

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

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

   1. dataset固定写法，不能改

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

注意点:

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

06-事件对象event的target与currentTarget

结论

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

总结：

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

07-编译模式的设置

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

如何使用：

1. 点击工具栏，普通编译，选择添加编译模式, 弹框主要有三个选项

   1. 启动参数的形式key=value&key1=value
      

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

08.1导航区设置

传送门

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

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

注意点：

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

08.2详情页-跳转逻辑

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

08.3进度条progress组件

progress

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

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

08.4详情页-导航区设置

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

09-小程序版本

1. 开发版本

   1. 微信开发者工具，预览扫描，在手机微信上看到就是开发版本
   2. 访问权限：项目成员才可以访问

2. 体验版本

   1. 上传代码可以选为体验版本
      
      

   2. 体验版本一般是老板客户和产品来体验小程序的，比开发版本更接近于上线版本

   3. 访问权限：作为体验成员才可以访问

3. 上线版本

   1. 上传代码，审核通过过后，再发布上线
   2. 访问权限，所有人都可以访问

10-小程序上线步骤

1. 先确定微信开发者工具里面填写你的appid

   1. 如果是测试号的话，微信开发者工具没有上传按钮

2. 在微信开发者工具上，点击上传按钮
   

3. 在小程序后台->版本管理->开发版本，可以选为体验版本（可选）

4. 提交审核，在打开的页面里面设置

   1. 版本描述，给客服看看
   2. 测试账号，如果小程序有部分功能需要登录才可以看到的话，一定要提供账号

5. 等待审核通过，如果审核通过的话，会给小程序的管理员消息的。然后你可以进入小程序后台，点击提交发布

   1. 审核时间一般2小时以内

6. 如果提交发布，搜索你的小程序

   1. 在小程序后台，设置里面找到你的小程序名字
   2. 在微信上，发现->小程序->搜索你的小程序名字