原生小程序笔记

小程序

自己看视频学的原生小程序记得笔记，有可能记得不好，请大家见谅，推荐看一下阮一峰的小程序入门，或者黑马尚硅谷的视频都很好，都是免费的。

轮播

swiper 轮播组件 indicator-dots加圆点 indicator-color颜色 indicator-active-color高亮颜色 autoplay自动播放 interval自动播放时间 circular连接切换

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay interval="1000" circular> 
    <!-- 其中的轮播item -->
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
</swiper>

rich-text组件将html标签渲染成wxml标签 nodes里写html标签 注意用单引号

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

text文本标签加user-select属性可以长摁复制

<view>
手机号长摁复制<text user-select>13899990000</text>
</view>

按钮 type="warn"改变样式 plain改变为虚线 size=“mini” 改变按钮大小

<button plain>普通按钮</button>
<button size="mini" type="primary">普通按钮</button>

相当于a标签 但是是使用url来指向路径

<navigator url="/pages/index/index">跳转</navigator>

data数据存储

依旧在data里存储数据

使用时通过插值语法使用，并且标签里也要用插值语法来使用

事件

切记每个函数要加逗号

tap事件类似于click事件 事件绑定写法：bindtap="handle"或bind:tap=“handle”

时间函数写在js文件中，不用写methods，直接和data同级即可

// 定义事件回调函数
    handle(e){
   
        console.log(e);
 },
//得写逗号

target 指向触发该事件的源头组件

currentTarget 指向当前对象所绑定的组件

<view bindtap="handle">

<button>按钮</button>

</view>

点击btn组件时，也会冒泡到view组件触发view组件的tap事件

e.target是button组件

currentTarget是view组件

加一函数

通过this.setDate({函数})来改变data中的数据 而且注意不能count++，要count+1而且要用 ：不能等号

// 加一函数
    countHandle(){
   
        this.setData({
   
            count: this.data.count+1
        })
    },

传递参数

小程序的事件绑定函数不能传递参数 bindtap=“handle(2)” 他会把handle(2)当成函数，要想传参得加data-info=“{ {2}}”他会在e.target.dataset中显示参数为{info:2}注意加{ {2}}是数字类型2，如果直接的话是字符串类型

<button type="primary" bindtap="handlecc" data-info="{
  {2}}">传递参数
</button>

handlecc(e){
   
        console.log(e);
        // 参数位置
        console.log(e.target.dataset);
    },

input事件

bindinput=“handleInp”

// input事件
    handleInp(e){
   
        console.log(e.detail.value);
    },

value得在e.detail.value取出来

条件渲染

wx:if wx:else hidden=“{ {true/false}}”

于vue的v-if和v-show差不多 但是有区别 hidden显示正好相反也是通过改变dispaly来实现隐藏和显示

<block></block>

模板可以实现多个同时渲染并且解析时会不会在wxml上展现此标签

<block wx:if="ture">
<view> vieww</view>
<view> vieww</view>
</block>

wx:for遍历 item为遍历的值，index为数组下标 也可以自定义命名item和index

<view wx:for="{
  {person}}">{
  {item.name}}--{
  {index}}</view>

页面配置

全局配置在app.json的windows中写

 "window":{
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#333",
    "navigationBarTitleText": "wss",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#666666"
  },

页面配置会覆盖掉全局配置 ，就近原理 直接在页面的json文件中写 例logs.json

{
   
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
   }
}

tabBar

全局配置，配置页脚，页顶路由，注意页顶不能有图标只能有文字 最少俩个，最多五个配置

点击跳转指定的页面 list数组必须写，list里的pagePath和text必须写

list里的iconPath 未选中的图标路径 selectedIconPath选中时的图片路径，不必非得写

"tabBar": {
   
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "首页"
      },