开发微信小程序项目遇到的问题(更新中)

系统:macos

模板：微信小程序typescript+sass

微信开发者工具版本：1.06.2412.40

调试基础库：3.7.4

1.使用微信小程序路由的api，比如wx.relaunch跳转页面没反应

错误的写法：这种写法导致我跳转的时候，跳转路径变成了"/pages/pages/login/login"。

 wx.reLaunch({
      url: "pages/login/login",
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.log(err)
      }
   })

正确的写法:将"pages/"改写成"/pages/"

 wx.reLaunch({
      url: "/pages/login/login",
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.log(err)
      }
    })

2.构建npm失败
解决方法:

在根目录下project.config.json文件的"setting"字段里，加上

     "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

由于我用的是typescript模板，所以根目录下有个miniprogram文件夹，这个文件夹里放的是app.json等文件，所以miniprogramNpmDistDir的值是"./miniprogram/"，如果用的是javascript的模板，app.json等文件是直接放在根目录下的，miniprogramNpmDistDir的值就要改成"./"。

3.Error: module.....is not defined, require args is.....

错误写法是:

import {test} from "/miniprogram/utils/test"

报错后又在app.json文件里加了

"resolveAlias": {
    "~/*": "/*",
  }

然后写成

import {test} from "~/utils/test"

这样的写法还是报错，最后只能用相对路径试了一下，成功了

正确写法:
我的页面路径是pages/login/login，utils目录和pages目录同级，引入test方法:

import {test} from "../../utils/test"

我还不太熟悉小程序，配置resolveAlias也是因为不想用一层层的"../",所以我也想求助各位大佬，为什么我配置的resolveAlias没有生效，导致我整个项目还是只能用相对路径。

4.获取微信小程序的页面链接不能用window.location，获取微信小程序的设备信息不能用window.navigator,判断生产和测试环境等

之前开发H5项目经常会在封装公共方法或者封装接口请求里用到window.location和window.navigator，并且需要判断生产和测试环境，我通过查找和测试，发现wx.getAccountInfoSync可以用来判断生产和测试环境，wx.getDeviceInfo可以用来代替navigator，而获取微信小程序页面链接就需要这样写:
由于是typescript模板，globalData里的routeInfo需要先在根目录下typings的index.d.ts文件里声明:

/// <reference path="./types/index.d.ts" />

interface IAppOption {
  globalData: {
    userInfo?: WechatMiniprogram.UserInfo,
    routeInfo?: Object
  }
  userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback,
}

然后在app.ts里写:

    // app.ts
App<IAppOption>({
  globalData: {
    routeInfo:{}
  },
  onLaunch() {
    wx.onAppRoute((res) => {
      this.globalData.routeInfo = res;
      console.log("全局路由监听", JSON.stringify(res))
    })
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        console.log(res.code)
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      },
    })
  },
})

接着是接口封装文件utils/request.ts:

export function request(url:string,data:any){
    return new Promise((resolve,reject)=>{

        wx.request({
            url,
            data,
            method:"POST",
            header:{},
            success(res){
                const routeInfo = getApp().globalData.routeInfo;
            },
            fail(err){
            }
        })
    })
}

我把routeInfo的获取写在了wx.request回调里，因为写在方法外面获取到的是undefined

5.微信小程序事件函数传参写法

比如微信小程序页面上绑定一个点击事件login，需要传入一个参数"xxxxx"

正确的写法是：

//login.wxml
<view bind:tap="login" data-flag="xxxxx">登录</view>
//login.ts
login(e){
    const flag=e.target.dataset.flag;
    console.log(flag);//输出结果为xxxxx
}

6.微信小程序Component里动态绑定class名前面会被自动加上"xxx--"

我创建了一个Component，在Component里动态绑定class名后发现样式不生效，排查后才看到样式名前面还被加上了"组件名--"，例如我的组件名是"navBar",我动态绑定的class名是"red-theme"，正确的class名肯定就是class="red-theme"，但是微信开发者工具调试器上显示的是class="navBar--red-theme"，现在还没有找到很好的解决方法，我在微信开放社区发现几年前就有开发者提出了这个bug，结果现在也没解决，我也提了，目前临时的解决方法是不使用Component，而是使用Page，Page里面动态绑定类名是正常的，希望能有好的解决方法吧，庆幸的是这个组件我刚开始开发，改成Page工作量不大，后面找到解决方法后，我会更新在这里。

7.将某个Page作为组件使用时，在这个Page的onShow里调用接口没反应，错误代码如下:

//pages/info/info.ts
Page({

    onShow(){
        test().then(res=>{

            console.log("接口调用测试")
        }).catch(err=>{})
    }

})

//pages/index/index.json

{
  "usingComponents": {
    "info": "../info/info"
  }
}

//pages/index/index.wxml
<info></info>

写的时候我将页面info作为页面index的组件使用，也没报错，就是调用接口没反应，我因为要实现某个逻辑就没有继续在点击事件里测试，直接放弃了把info作为index子组件的想法，不是没想把info最开始就定义为component,只是开发了一部分代码之后遇到的问题让我感觉还不如将info定义为Page使用，info其实是tab切换的其中一个页面，这几个页面有一部分共同的逻辑，如果把info作为page使用的话，意味着这部分共同逻辑在每个tab页面里我都要写一遍，所以最初第一反应就是将这几个tab页定为组件，又因为在开发的时候遇到的问题觉得还是Page最稳定，不会导致页面突然出现样式错乱等问题，尝试着info的Page嵌入到index的Page里，这样那部分共同的逻辑只需要再index写上一遍，动态样式、点击事件等都正常，结果就在onShow里调用接口的时候没有反应了，好无奈，只能放弃这样的写法。

8.微信小程序拨打电话

用wx.makePhoneCall代替a标签

 wx.makePhoneCall({
      phoneNumber: "12345679"
    })

9.微信小程序正则表达式replace的使用

例如在input里输入手机号，但是只能输入数字，除数字以外的都替换为空字符串：

正确的写法：

//phone.wxml
<input placeholder="请输入手机号码" value="{{mobilePhone}}"  maxlength="11"  bindinput="testPhone" />

//phone.ts

Page({

    data:{
        mobilePhone:""

    },
      testPhone(e: any) {
        this.setData({
              mobilePhone: e.detail.value
        })
        this.data.mobilePhone ? this.setData({
              mobilePhone: this.data.mobilePhone.replace(/[^\d]/g, "")
        }) : ""
  },
    
})

思路就是先将input里输入的值赋值给变量mobilePhone，然后判断mobilePhone有值的情况下再使用正则表达式replace里的方法将除数字以外的字符替换为空字符并将此结果再次赋值给mobilePhone。我当时是省略了第一步赋值，并且写成了this.setData({

mobilePhone:e.detail.value?e.detail.value.replace(/[^\d]/g, ""):""

})，结果显而易见失败了，我又去百度各种查，看到有和我遇到一样问题的，有网友的说replace方法在小程序里不能用，要换成test，我以为是小程序的兼容问题，由于replace的方法用的多，所以去了官方社区求助，自己也反复试，猜测可能是一开始的写法就错了，这才重新换了思路改了写法，将mobilePhone赋值了两遍，终于成功了，这几天写小程序写的佛了，几乎每次写逻辑都会遇到问题，希望我的写法能帮到大家吧

10.微信小程序事件传参时参数命名尽量小写，不要用驼峰式命名

例如data-testParam会被转换成data-testparam，如果是用data-test-param则是会被转换成data-testParam，因此尽量使用全部小写这种稳定的方式命名，这样不会被小程序强制转换名称，导致定义的变量名在不知情的情况下换了一个

//比较稳定的写法：
//test.wxml
<view bind:tap="test" data-testparam="123456">
    测试按钮
</view>
//test.js
Pages({

    test(e){
        const param=e.target.dataset.testparam;
        console.log(param)//123456
    }
})

11.不要给wx:key的值手动拼接额外的字符串，会报错

//错误的写法，用这种错误的写法写出来报的错是少一个括号，导致我一直挨个找到底哪里少了一个括
//号，结果问题出在了wx:key上例如：
<view wx:for="{{testList}}" wx:key="'2'+index">文案</view>
<view wx:for="{{testList}}" wx:key="{{'2'+index}}">文案</view>

//正确的写法，例如：
<view wx:for="{{testList}}" wx:key="index">文案</view>

//不报错的拼接写法，例如：
<view wx:for="{{testList}}" wx:key="2index">文案</view>

PS:
wx:key里好像不能用"xxx"+"xxx"这种方式进行拼接，也不能写成wx:key="{{index}}"这种带双括号的形式