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

系统:macos

模板：微信小程序typescript+sass

微信开发者工具版本：1.06.2412.40

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工作量不大，后面找到解决方法后，我会更新在这里。