微信小程序

外婆桥卖汤
150 阅读3分钟

微信小程序

app.json拆分

注意：里面的名字都要用""包起来，切记不可用单引号

pages

是每个页面，书写的先后顺序代表的就是文件默认展示的先后顺序

tabBar

用来写底部栏的，是个对象，里面有一个list数组用来写每一个底部栏，每一个底部栏代表的是每一个小对象，如

"tabBar":{
        "color": "#000", // 默认颜色
        "selectedColor": "#4E6EF2",// 点击后颜色
        "list": [//每个底部栏
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "img/home.png",
                "selectedIconPath": "./img/home_active.png"
            }]
}

常用标签

text 类似于原生的span

  • text里面不能包含块级元素
  • 行间属性 user-select除了文本以外的元素都不能长按选中
  • decode 解码

view 类似原生的div，只不过在原生的div上新增了一些功能

image 相当于原生的img，可以为单标签也可以为双标签

  • 小程序内的image有默认大小width:320px height:240px
  • 行间属性 mode的值
  • scaleToFill 缩放模式，不保持比例,直接填满大小
  • aspectFit 保持纵横比,显示在中间
  • widthFix 保持纵横比，宽度自定义，高度自适应
  • HeightFix 保持纵横比，高度自定义，宽度自适应

swiper 轮播

  • 里面要跟swiper-item标签,代表的是每个轮播的项
  • 行间属性
  • indicator-dots 底部指示点
  • autoplay 自动播放
  • circular 衔接滑动
  • interval 滑动时间间隔 默认5000ms
  • indicator-color 指示点颜色
  • indicator-active-color 选中状态的指示点颜色

navigator 类似于a标签

  • url跳转地址 以/pages开头
  • open-type跳转方式
  • navigate 直接跳转页面，但不能跳转tabBar页面。最多嵌套10层页面栈
  • navigateBack delta表示回退层数； getCurrentPages()可查看当前页面栈
  • redirect 关闭当前，再跳转
  • switchTab 关闭所有页面，跳转tabBar页面
  • reLaunch 关闭所有页面，并跳转
<navigator url="/pages/demo1/demo1" open-type="navigate">跳转dome1</navigator>

传参、事件

事件

bind可以加:也可以不加,相当于vue中的v-on

传参

在行内属性传入 变量名=要传的参数，参数可以为{{data里的变量}},也可以为"字符串"

接收

  • 函数接受事件对象e，e.target.dataset里面的数据就是我们传递的参数
  • 发布订阅的方法用的不是$emit而是this.triggerEvent,不过用法相同
  • 子组件拿到父级传递的参数,要在子组件的js里面写上如下代码,且一定要写在Page下面，否则会报错
  • 方法要在Component里面的methods里设置函数，在函数内用this.triggerEvent进行发布
Component({properties: {
      data:String
    },
    methods:{
    //这里写的是方法，可以在里面用this.triggerEvent('函数名',参数)来执行传递来的函数
    fn(){
    this.triggerEvent('传递过来的函数名')
    }
    })

组件的注册

在使用的文件夹下的json文件中书写以下代码

{
  "usingComponents": {
    "自定义组件名":"要使用的组件文件地址"
  }
}

for指令

  • 用法 wx:for="{{data里的变量名}}"
  • 用法与v-for类似，不同之处在于它不用写item与index，但可以直接使用
  • 注意，用wx:for一定要写wx:key
<view wx:for="{{list}}" wx:key="index">
    <view wx:for="{{item}}" wx:key="index">
        {{item}}
    </view>
</view>

if elif else指令

  • 用法与v-if v-else if v-else一样
  • 只不过前缀是wx:而不是v-
  • 注意区分wx:elif 是else if的意思
<view wx:if="{{false}}">1</view>
<view wx:elif="{{false}}">2</view>
<view wx:else>3</view>

getApp()方法

可以在其他页面获取到app.js上的数据

avatar
文章
阅读
粉丝