微信小程序杂记

结构	传统web	微信小程序
结构	HTML	WXML
样式	css	wxss
逻辑	Javascript	Javascript
配置	无	JSON

微信多了一层配置层

微信小程序的目录结构

配置全局的app.json

app,json中,

"pages":[ 
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",				//下拉 loading 的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",    //顶部导航栏背景色
    "navigationBarTitleText": "Weixin",		//顶部导航栏的文本
    "navigationBarTextStyle":"black"           //顶部导航栏文本的颜色,仅能白或黑
  },

pages表示显示的页面,第一个的页面即为最先展示的页面
window会定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等

在window中可加入
1.表示是否开启全局的下拉刷新

"enablePullDownRefresh":true

2.下拉刷新窗口的背景色

"backgroundColor":"#795632"

配置当前页面的page名.json
app.json是配置所有的页面,而page,json则为配置当前的页面

tabbar

"color": "#659494",            //未选择前的文字颜色
"selectedColor": "ff9400",      //选择后的文字颜色
"backgroundColor": "#795632",     //底部导航的背景颜色
"position": "top"                    //底部导航的位置,仅能top和bottom

mustache语法在微信的使用

首先,标签名不同

text  ==span
view  == div
checkbox  ==<input type="checkbox">

在js的page的data属性中进行书写

1.普通书写

Page({
  data: {
    message: 'Hello MINA!'
 }
})

<view> {{ message }} </view>

2.作为标签的属性值

<view id="{{id}}"> </view>

<checkbox checked="{{false}}"> </checkbox>

3.在mustache语法中添加语法,表达式等

3.1三元运算

<view>{{num%2==0?'偶数':'奇数'}}</view>

3.2算数计算
<view>{{'1'+'1'}}</view>
<view>{{1+1}}</view>

3.3逻辑判断
<view>{{1+1<1}}</view>

列表渲染

wx:for与v-for有相同的功能,但是用法却不同

person:[
			{
			name:'mina',
          	age:18,
          	height:1.88
      		},
    {
      name:'Sufi',
      age:38,
      height:2.50
 	},
  			{
  			name:'loki',
          	age:18,
          	height:1.28
     	 	},
      {
      name:'tom',
      age:14,
      height:1.68
  	  }
  ]

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

wx:for-item=“item”: 可以指定数组当前元素的变量名
wx:for-index=“index” 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如
   wx:key:age
2. 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是 唯⼀的字符串和数组
   wx:key:*this

当仅有一层循环时,wx:for-item=“item” wx:for-index="index"可以省略,默认为item和index

循环对象时

person:
      {
      name:'tom',
      age:14,
      height:1.68
    }

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

index表示属性,item表示属性的值

wx:if与v-if效果一样,同样的还有wx:elif =v-else-if ,wx:else = v-else

也可以在标签中加入
hidden="{{true}}"
频繁切换 ⽤ hidden

事件的绑定

给input的输入,其他的值改变
1.给input的标签绑定事件 bindinput
<input type="text" bindinput="inputout"/>
2.在page中添加inputout方法(不需要写在methods里)

获取输入框的值:e.detail.value

  inputout(e){
    this.setData({
      num1:e.detail.value
    })
  }

与vue不同的是:
wx小程序里不能直接
this.num=e.detail.value
而需要运用setData()函数

绑定点击事件bindtap
1.给button的标签绑定事件 bindtap

<button bindtap="" >+</button>
<button bindtap="">-</button>

2.由于wx小程序中不能直接传参,我们需要自定义属性来传参

<button bindtap="taphandle" data-statis="{{1}}">+</button>
<button bindtap="taphandle" data-statis="{{-1}}">-</button>

3.在page中添加方法

taphandle(e){
      const statis=e.currentTarget.dataset.statis;
      this.setData({
        num1 : this.data.num1+statis
      })
  }
})

wxss

小程序不需要引入样式文件
rpx

width: calc(750rpx *100/375);

样式的导入
用==@import==
路径为绝对路径

常见组件

text

属性名	作用
user-select	文本是否可选(true/false)，该属性会使文本节点显示为 inline-block
decode	是否解码

selectable已废弃

image
在微信小程序中,不为img,而是image
图片存在默认的宽度和高度320* 240,

mode属性决定图片内容如何和图片标签宽高做适配

模式
默认值为scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。常用于轮播图
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

剩余的还有top,bottom,left,right等,与position相似

lazy-load属性
图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

swiper(轮播图)

其中只可放置swiper-item组件，否则会导致未定义的行为
swiper标签存在默认样式
width :100%
height :150px
image存在默认宽度和高度320* 240
swiper高度无法实现由内容撑开
所以我们会先找出来原图的宽度和高度等比例给swiper定宽度和高度

swiper的属性

indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点颜色
autoplay	是否自动切换
interval	自动切换时间间隔
duration	滑动动画时长
circular	是否采用衔接滑动

navigator标签

相当于a标签,但为块级元素,会默认换行
属性:
url:要跳转的地址

target 要跳转到当前的小程序还是其他的小程序的页面
self 默认值自己小程序的页面
miniProgram 其他的小程序的页面I

open-type 跳转的方式
navigate:默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到有tabbar页面
redirect:关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到 tabbar ⻚⾯
switchTab:跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
reLaunch:关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
navigateBack:关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当 前的⻚⾯栈，决定需要返回⼏层
exit:退出⼩程序，target= miniProgram 时⽣效

富文本标签rich-text

可以放入html代码(标签字符串)
nodes 不推荐使⽤ String 类型，性能会有所下降

 data: {
    html:`<div>
<h2>哈哈哈哈哈</h2>
</div>`
 },

还有对象

 data: {
    nodes: [{
      name: 'div',     //要建立的标签名
      attrs: {           //标签的属性
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },                    //标签的子节点
      children: [{
        type: 'text',
        text: 'Hello World!'
     }]
   }]
 },

attrs 属性不⽀持 id ，⽀持 class
img 标签仅⽀持⽹络图⽚

button标签

外观属性

size:button的大小

值	说明
default	默认⼤⼩
mini	⼩尺⼨

type:按钮的样式类型

值	说明
primary	绿⾊
default	⽩⾊
warn	红⾊

plain 是否镂空
loading 等待图标
form-type

值	说明
submit	提交表单
reset	重置表单

open- type微信的开放能力

getphonenumber的使用

1.绑定一个事件bindgetphonenumber

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

<button size="default" type="primary" open-type="getPhoneNumber" bindgetphonenumber="getnum">获取电话号码</button>

getUserInfo与获取手机号码类似
但获取的信息不加密




launchApp在小程序当中直接打开app
1需要现在app中通过app的某个链接打开小程序
2在小程序中 再通过这个功能重新打开app

icon图标

单选框radio

radio标签必须放在radio-group标签中

可以通过color来修改选择时的颜色
小案例:

<radio-group bindchange="handlechange">
    <radio  color="green" value="male">男</radio>
    <radio  color="red" value="female">女</radio>
    您的选择是:{{gender}}
</radio-group>


js文件中:
data: {
    gender:''
  },
handlechange(e){
    let gender=e.detail.value;
    this.setData({
      gender
    })
  }

复选框checkbox

小例子:

wxml标签中:

<checkbox-group bindchange="change">
       <checkbox wx:for="{{list}}" color="red" 
       wx:key="index" value="{{item.value}}">{{item.name}}
       </checkbox>
        <view>
         您的选择是:{{fruit}}
    </view> 
</checkbox-group>

js标签中:
data: {
    list:
    [
    {name:'苹果',value:'苹果'},
    {name:'香蕉',value:'香蕉'},
    {name:'菠萝',value:'菠萝'},
    {name:'哈密瓜',value:'哈密瓜'}
  	],
  fruit:[]
  },
  change(e){
    const fruit=e.detail.value;
    this.setData({
      fruit
    })
  }

组件

页面的回调函数要与data同层级
组件的回调函数放在methods里

标题激活选中案件
data里的数据

data: {
    tabs:[{
      id:0,
      name:'首页',
      isactive:true
    },
    {
      id:1,
      name:'原创',
      isactive:false

    },
    {
      id:2,
      name:'分类',
      isactive:false

    },
    {
      id:3,
      name:'关于',
      isactive:false

    },
  ]
  },

1.绑定点击事件需要在methods中绑定

<view class="title_item {{item.isactive?'active':''}}" 
        wx:for="{{tabs}}" wx:key="id" bindtap="tabcontrol" 
        data-index="{{index}}">
            {{item.name}}
        </view>

 methods: {
    tabcontrol(e){
    
      const {index}=e.currentTarget.dataset;   //获取被点击的索引

      let {tabs}=this.data;    //获取原数组
      
     tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);
     //对数组循环
      this.setData({
        tabs
      })
    }
  }

父子组件的数据传递

父组件通过自定义标签的属性传给子组件,
<tabs aaa="wwwwww"></tabs>
子组件通过js中的properties接收来自父组件的数据

properties: {
      aaa:{
        type:String,
        value:''
      }
  },

接收后,该数据的用法与data中的用法一致
{{aaa}}

子传父
triggerEvent(“父组件自定义事件的名称”,父组件希望获取的参数)

生命周期函数

写于app.js中

写于page.js中