半年技术复盘

1 大屏幕终极解决方案，注意配置个别页面方法ceshi是指该页面当前目录，不需要src等一大堆

module.exports = {

  plugins: {

    // autoprefixer: {},

    tailwindcss: {},

    autoprefixer: {},

    "xy-postcss-px-to-viewport": {

      unitToConvert: "px", // 要转化的单位

      viewportWidth: 1920, // UI设计稿的宽度

      unitPrecision: 6, // 转换后的精度，即小数点位数

      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换

      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw

      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw

      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，

      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换

      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false

      replace: true, // 是否转换后直接更换属性值

      // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配

      landscape: false, // 是否处理横屏情况

      // include:  /\/src\/views\/ehs\//

      include: [/ceshi/],

    },

  },

};

2、echarts 的高度只需在父级设置100%便会盛满高度，echarts的兜底处理坑是

需要借助this.$nextTick(() => {}),但是判断复制的时候，需要将控制展示的变量放在nextTick之外，也就是前面，而操作echarts的配置包括获取放在里面

例如

 if (data.length === 0) {

        this.isShowBottom = true;

      } else {

        this.isShowBottom = false;

      }

      this.$nextTick(() => {

        let myChart = this.$echarts.init(this.$refs.bar);

        let option = {}

}）

3 、复盘三就是第三方大屏dataV的使用坑，动态翻译表格每个单元格如果内容很多，不支持自定义和tooltip，我自己已经二次重构了官网并重新发包了

@zhaochengxian/big-screen-components - npm

4、小程序新增知识

    一、小程序官网编辑器是可以自动生成骨价屏的

    二、小程序的webview封装是存在缓存的，需要提前加上随机数

    三、小程序的手机号授权官网已经更新了api

 <button open-type="getPhoneNumber" class="login_button" @getphonenumber="login"
                                v-show="!logged">一键登录</button>

//一键登录

const login = (e) => {

        let detail = e.detail

        if (detail.errMsg == "getPhoneNumber:ok") {

                let code = detail.code

                loginByPhone(code, openid.value)

        }

}

/**

 * 根据手机号登录

 */

const loginByPhone = (code, openid) => {

        Taro.request({

                url: baseUrl + 'auth/wechat/loginByPhone?code=' + code + "&openId=" + openid,

                success: (data) => {

                        if (data.data.code === 200) {

                                const { registerFlag, access_token } = data.data.data

                                if (registerFlag !== "1") {

                                        Taro.setStorageSync('access_token', access_token)

                                        // 系统存在该用户，直接进入系统逻辑

                                } else {

                                   

                                        Taro.navigateTo({

                                                url: `/pages/bindAccount/index?openid=${openid}`,

                                                success: function (res) { },

                                        });

                                }

                        }

                }

        })

}

  

用户点击一键登录，会唤起小程序的手机号授权，用户点击允许，拿到微信code传给后端获取手机号查询数据库，如果用户点击拒绝授权

，唤起拒绝二次确认提示

后端具体实现参考这个博客

微信小程序登录获取手机号教程(超详细)_微信小程序获取手机号-优快云博客

前后端遇到的坑：

就是利用秘钥查询手机号的时候提示不合法,密钥在后台管理重置一下即可

5、app新增知识和遇到的坑

    一、热部署不起作用，重新打包，部署到服务器即可

    二、打包，选择云打包，使用共有证书和传统打包一般会省去很多麻烦

    三、hbuilder版本问题，4.06以后打出的dist目录接口变了

    四、pad扫描问题实际上走的是input confirm,为了解决扫描同一个bug问题，解决方案采用两个input

<input v-show="focus1" class="input" v-model="formData.labelCode" type="text" placeholder="请输入"
					:clearable="true" :inputBorder="false" @confirm="scanChange" :focus="focus1" />
				<input v-show="focus2" class="input" v-model="formData.labelCode" type="text" placeholder="请输入"
					:clearable="true" :inputBorder="false" @confirm="scanChange" :focus="focus2" />

   

uiniapp本地跨域解决注意是放在mainfest.json里面

"h5": {
        "devServer": {
            "proxy": {
                "/api": {
                    "target": "https://baidu.com",
                    "changeOrigin": true,
                    "pathRewrite": {
                        "^/api": ""
                    }
                }
            }
        }
    },

小程序扫描创建声音的时候注意，要及时的销毁否则页面对接，内存达到一定的程度就不响了 

data(){
    return {
        innerAudioContext:null,
    }
},
methods:{
    playAudio(id) {
                  const innerAudioContext = uni.createInnerAudioContext();
                  innerAudioContext.autoplay = true;
                  innerAudioContext.src = '/static/'+id+'.mp3';
                  innerAudioContext.onPlay(() => {
                    console.log('开始播放');
                  });
                  innerAudioContext.onError((err) => {

                      this.clear()
                  });
                  innerAudioContext.onEnded(() => {
                    this.clear()
                    
                    console.log('播放结束');
                  });
                }

    clear(){
                 if(this.innerAudioContext){
                     this.innerAudioContext.stop();
                     this.innerAudioContext.destroy();
                     this.innerAudioContext = null
                 }
                
            },
},

onUnload() {
			this.clear()	
		},