小程序笔记_小程序笔记’-CSDN博客

本文链接：https://blog.csdn.net/weixin_51300999/article/details/121846806

就是调用微信Api（wx.getLocation），可以直接获取经纬度，（wx.chooseLocation方法可以调取地图显示位置）

wx.getLocation({
      success: function (res) {
          that.globalData.longitude = res.longitude,
          that.globalData.latitude=res.latitude//这里是获取经纬度
      },

1.小程序组件

1.1swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

autoplay

boolean

false

否

是否自动切换

interval 修改轮播时间

circular 衔接轮播

indicator-dots 显示指示器分页器索引器

indicator-color 指示器的未选择的颜色

indicator-active-color 选中的时候的指示器的颜色

即可直接生成轮播图

change事件 source 返回值

change事件增加 source字段，表示导致变更的原因，可能值如下：

autoplay 自动播放导致swiper变化；
touch 用户划动引起swiper变化；
其它原因将用空字符串表示。

Bug & Tip

tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

1.2navigator

target

string

self

否

在哪个目标上发生跳转，默认当前小程序

合法值	说明
self	当前小程序
miniProgram	其它小程序

url

string

否

当前小程序内的跳转链接

0 块级元素 默认会换行 可以直接加宽度和高度

1 url 要跳转的页面路径绝对路径相对路径

2 target 要跳转到当前的小程序还是其他的小程序的页面

self 默认值自己小程序的页面

miniProgram 其他的小程序的页面

3 open-type 跳转的方式

1 navigate 默认值保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。

3 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

4 reLaunch 关闭所有页面，打开到应用内的某个页面

<navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator>
 <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator>
 <navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator>

1.3 button的开放能力

1 contact 直接打开客服对话功能需要在微信小程序的后台配置只能够通过真机调试来打开

2 share 转发当前的小程序到微信朋友中不能把小程序分享到朋友圈

3 getPhoneNumber 获取当前用户的手机号码信息结合一个事件来使用不是企业的小程序账号没有权限来获取用户的手机号码

1 绑定一个事件 bindgetphonenumber

2 在事件的回调函数中通过参数来获取信息

3 获取到的信息已经加密过了

需要用户自己待见小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了

4 getUserInfo 获取当前用户的个人信息

1 使用方法类似获取用户的手机号码

2 可以直接获取不存在加密的字段

5 launchApp 在小程序当中直接打开 app

1 需要现在 app中通过app的某个链接打开小程序

2 在小程序中再通过这个功能重新打开 app

3 找到京东的app 和京东的小程序

6 openSetting 打开小程序内置的授权页面

1 授权页面中只会出现用户曾经点击过的权限

7 feedback 打开小程序内置的意见反馈页面

1 只能够通过真机调试来打开

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

Page({
  // 获取用户的手机号码信息
  getPhoneNumber(e){
    console.log(e);
  },
  // 获取用户个人信息
  getUserInfo(e){
    console.log(e);
  }
})

1.4 radio单选框

radio 单选框

1 radio标签必须要和父元素 radio-group来使用

2 value 选中的单选框的值

3 需要给 radio-group 绑定 change事件

4 需要在页面中显示选中的值

<radio-group bindchange="handleChange">
   <radio color="red" value="male">男</radio>
   <radio color="red" value="female" >女</radio>
 </radio-group>

 <view>您选中的是:{{gender}}</view>

Page({
  data: {
    gender: ""
  },
  handleChange(e){
    // 1 获取单选框中的值
    let gender=e.detail.value;
    // 2 把值 赋值给 data中的数据
    this.setData({
      // gender:gender
      gender
    })
  }
})

1.5 checkbox复选框

性质类似于radio 必须要和父元素 radio-group来使用

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>

  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>


Page({
  data: {
    list:[
      {
        id:0,
        name:"apple",
        value:"apple"
      },
      {
        id:1,
        name:"grape",
        value:"grape"
      },
      {
        id:2,
        name:"bananer",
        value:"bananer"
      }
    ],
    checkedList:[]
  },
  // 复选框的选中事件
  handleItemChange(e){
    // 1 获取被选中的复选框的值
    const checkedList=e.detail.value;
    // 2 进行赋值
    this.setData({
      checkedList
    })
  }
})

2.自定义组件

1.类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）

//json
{
  "component": true
}

2.同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似.在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

3.在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

eg:点击切换示例

<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->

    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="hanldeItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
  </view>
  </view>
  <view class="tabs_content">
    <!-- 
      slot 标签 是一个占位符 插槽
      等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签
      就会替换 slot 插槽的位置 
     -->
    <slot></slot>
  </view>
</view>

.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

{
  "component": true,
  "usingComponents": {}
}

// components/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    // 要接收的数据的名称
    // aaa:{
    //   // type  要接收的数据的类型 
    //   type:String,
    //   // value  默认值
    //   value:""
    // }
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // tabs
  },
  /* 
  1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
  2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
   */
 

  methods: {
    hanldeItemTap(e){
      /* 
      1 绑定点击事件  需要在methods中绑定
      2 获取被点击的索引 
      3 获取原数组 
      4 对数组循环
        1 给每一个循环性 选中属性 改为 false
        2 给 当前的索引的 项 添加激活选中效果就可以了！！！

       
       5 点击事件触发的时候 
          触发父组件中的自定义事件 同时传递数据给  父组件  
          this.triggerEvent("父组件自定义事件的名称",要传递的参数)
       */

      //  2 获取索引
      const {index}=e.currentTarget.dataset;
      // 5 触发父组件中的自定义事件 同时传递数据给  
      this.triggerEvent("itemChange",{index});
      // 3 获取data中的数组
      // 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已
      // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      // 不要直接修改 this.data.数据 
      // let {tabs}=this.data;
      // let tabs=this.data;
      // 4 循环数组
      // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
      // tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

      // this.setData({
        // tabs
      // })
    }
  }
})

页面代码

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<block wx:if="{{tabs[0].isActive}}">0 </block>
<block wx:elif="{{tabs[1].isActive}}">1 </block>
<block wx:elif="{{tabs[2].isActive}}">2 </block>
<block wx:else>3</block>
</Tabs>

//json
{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {

    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      }
      ,
      {
        id: 2,
        name: "分类",
        isActive: false
      }
      ,
      {
        id: 3,
        name: "关于",
        isActive: false
      }
    ]

  },

  // 自定义事件 用来接收子组件传递的数据的
  handleItemChange(e) {
    // 接收传递过来的参数
    const { index } = e.detail;
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  }
})