微信小程序学习

一.设置底部导航json

 "tabBar": {
    "color": "#A6A6A6",
    "selectedColor": "#3B7CFF",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "images/icon01.png",
        "iconPath": "images/icon1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/icon02.png",
        "iconPath": "images/icon2.png",
        "pagePath": "pages/logs/logs",
        "text": "我要开票"
      }
    ]
  },

二.设置背景颜色

      "backgroundColor": "#F6F6F6",不起作用，其实用css设置背景颜色就好，这个只是设置了下拉漏出来的颜色，模拟器上不显示

三.px和rpx转化

四. npm引入小程序官方WeUI组件库weui-miniprogram

       1、打开cmd，在小程序根目录内，初始化npm        npm init

        2.执行命令安装 npm 包：         npm install --save weui-miniprogram

        3、安装完成后，在微信开发者工具中的菜单栏：工具 ------ 构建 npm ：

                

     4.在微信开发者工具中的右上角：详情 ------ 本地设置， 勾选“使用 npm 模块”选项： 

     5、app.wxss引入全局样式

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

   6.以pages的index为例，json中引入cell：

	{
		  "usingComponents": {
			    "mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell"
		   }
	}

    7、点击文档中的组件示例代码，开始ctrl C + ctrl V吧~

 

五：微信小程序的标签和html标签比较

html	小程序
<div></div>	<view></view>
<h1><h2>....<h6> <p><span>	<text></text>
<input type="text"> <input type="checkbox"> <input type="radio"> <input type="file">	<input /> <checkbox /> <radio /> <view bindtap="changeImage"></view>
<select> 　　<option></option> 　　<option></option> </select>	<picker range="{{area}}"> 　　<view> {{area[index]}}</view> </picker>
<a href="#"></a>	<navigator url="#" redirect></navigator>
<img src="">	<image mode="aspectFill" src="">
<i class="icon"></i>	<icon></icon>

六：设置文本显示一行

给text标签设置 

.objName{width: 400rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;}

七：动态添加class，根据不同状态添加class

<text class="{{item.status=='2'?'status02':''||item.status=='3'?'status03':''}}">{{item.status_show}}</text>

 

八：小程序实现选项卡

index.js

//invoiceInfo.js
//获取应用实例
const app = getApp()

Page({
  data: {
    activeIndex:0,
  },
  onLoad() {
   
  },
  // 个人/机构切换
  navChange:function(e){
    const that = this;
    if (that.data.activeIndex === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        activeIndex: e.target.dataset.current
      })
    }
  },
  //获取当前滑块的index
  bindchange: function (e) {
    const that = this;
    that.setData({
      activeIndex: e.detail.current
    })
  },
})

index.wxml

<view class="navbar"> 
    <text class="{{activeIndex == 0 ?'active':''}}" data-current="0" bindtap="navChange">个人开票</text> 
    <text class="{{activeIndex == 1 ?'active':''}}" data-current="1" bindtap="navChange">机构开票</text> 
  </view>
  <swiper current="{{activeIndex}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
    <swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item>
    <swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item>
  </swiper>

九：微信小程序换行用 \n 必须是在text标签中使用，view中没有效果

十：点击隐藏/显示

十一： 控制input输入小数，并且只能输入小数点后两位

inputAmount: function (e) {
    var amountValue;
    if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
      amountValue = e.detail.value;
    } else {
      amountValue = e.detail.value.substring(0, e.detail.value.length - 1);
    }
    this.setData({
      amountValue: amountValue,
    })
  },

十二：微信小程序md5加密算法封装及用法详解--微信小程序生成md5签名

https://blog.csdn.net/abs1004/article/details/79105046

 

小程序mpvue中flyio的使用方法

https://www.cnblogs.com/fuzhengyi/p/9579804.html

https://blog.csdn.net/weixin_34066347/article/details/88860416

 

小程序授权，获取code

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      //使用 code 换取 openid 和 session_key 等信息
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})
			```

 微信小程序 this.setData，改变对象中某一个值

this.setData({
          ['invoiceInfo.donateProjectLogo']: res.data.donateProjectLogo,
          ['invoiceInfo.donateProjectName']: res.data.donateProjectName,
          ['invoiceInfo.donateProjectChannel']: res.data.donateProjectChannel,
          ['invoiceInfo.qrStatus']: res.data.qrStatus
        })

微信小程序setData()的使用

https://www.jianshu.com/p/91a81bdf5ede