微信小程序日常踩坑笔记

项目踩坑笔记

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、在微信公众平台管理-版本管理-提交审核