微信小程序日常踩坑笔记

项目踩坑笔记

wxss 中定义全局变量

在 app.wxss 中定义全局变量，其它组件内可以直接使用

/*
 主题颜色 通过变量来实现
 1 sass 中 存在 变量这个知识
 2 原生的css和wxss也是支持 变量
 */
 page{
   /* 定义主题颜色 */
   --themeColor:#eb4450;
   /*
    定义统一字体大小  假设设计稿 大小是 375px
    1px= 2rpx
    14px = 28rpx
     */
     font-size: 28rpx;
 }

 image{
    100%;
 }

其它组件内使用

.active{
  color: var(--themeColor);
  <!-- currentColor 继承使用当前字体颜色 -->
  border-left: 5rpx solid currentColor;
}

渲染数据相关问题

输出字符串时候拼接变量

  <navigator wx:for="{{item1.children}}" wx:for-index="index2" wx:for-item="item2" wx:key="cat_id"
    url="/pages/goods_list/index?cid={{item2.cat_id}}">
    <image src="{{item2.cat_icon}}" mode="widthFix" lazy-load="false">
    </image>
    <view class="goods_name">{{item2.cat_name}}</view>
  </navigator>

使用三元表达式，在变量不存在时候输出默认值

<image src="{{item.goods_small_logo?item.goods_small_logo:'http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg'}}" mode="widthFix" lazy-load="true">
  </image>

<view class="menu_item  {{index===currentIndex?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this"
        bindtap="handleItemTap" data-index="{{index}}">
        {{item}}
      </view>

替换路径

    this.setData({
      goodsObj: {
        goods_name: res.data.message.goods_name,
        goods_price: res.data.message.goods_price,
        // iphone部分手机  不识别 webp图片格式
        // 最好找到后台 让他进行修改
        // 临时自己改  确保后台存在 1.webp => 1.jpg
        goods_introduce: res.data.message.goods_introduce.replace(
          /.webp/g,
          ".jpg"
        ),
        pics: res.data.message.pics,
        isCollect,
      },

小程序中的本地存储

0 web 中的本地存储和小程序中的本地存储的区别
1 写代码的方式不一样了
web： localStorage.setItem("key", "value"); localStorage.getItem("key");
小程序中： wx.setStorageSync("key", "value"); wx.getStorageSync("key");
2 存的时候 有没有做类型转换
web: 不管存入的是什么类型的数据，最终都会先调用一下 toString() ,把数据变成了字符串 再存入进去
小程序： 不存在 类型转换的这个操作 存什么类型的数据进去，获取的时候就是什么类型
1 先判断一下本地存储中有没有旧的数据
{time: Date.noew(),data:[...]}
2 没有旧数据 直接发送新请求
3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可

在小程序中设置 es7 的 async 语法

es7 的 async 号称是解决回调的最终方案：
1、在小程序的开发工具中，勾选 es6 转 es5 语法
2、下载 facebook 的 regenerator 库中的 'regenerator/packages/regenerator-runtime/runtime.js'
3、在小程序目录下新建文件夹 lib/runtime/runtime.js ，将代码拷贝进去
4、在每一个需要使用 async / await 语法的页面 js 文件中，引入(不能全局引入)即可，只需引入，不必使用

import regeneratorRuntime from '../../lib/runtime/runtime';

父、子组件通信

一、 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
1 在子组件上进行接收 <Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
2 把这个数据当成是 data 中的数据直接用即可

// components/Tabs.js
properties: {
  // 要接收的数据的名称
  tabs:{
    // type  要接收的数据的类型
    type:Array,
    // value  默认值
    value:[]
  }
},

二、 子向父传递数据 通过事件的方式传递
1 在父组件声明需要监听触发的事件，并在调用子组件的标签上加入一个 自定义事件
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
2 在子组件触发父组件中的自定义事件 同时传递数据给 父组件
this.triggerEvent("父组件自定义事件的名称",要传递的参数)

图片上传

上传文件的 api 不支持 多个文件同时上传 遍历数组 挨个上传

      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // 图片要上传到哪里
          url: "https://img.545141.com/file.php",
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称 后台来获取文件  file
          name: "file",
          // 顺带的文本信息
          formData: {},
          success: (result) => {
            let url = JSON.parse(result.data);
            this.UploadImgs.push(url);
            // 所有的图片都上传完毕了才触发
            if (i === chooseImgs.length - 1) {
              wx.hideLoading();
              // 此处暂时模拟提交
              // 提交都成功了
              // 重置页面
              this.setData({
                textVal: "",
                chooseImgs: [],
              });
              // 返回上一个页面
              wx.navigateBack({
                delta: 1,
              });
            }
          },
        });
      });

发布项目

1、详情-本地设置-【取消勾选】不校验合法域名
2、修改 APPID 为企业微信 ID
3、点击上传按钮
4、在微信公众平台 管理-版本管理-提交审核