uniapp開發(fā)遇到的問題總結

1. input自定義實現v-model時，數據更新后，視圖不會更新
<input type="number" class="m-answer-score-input" :value="questionList.answer[subQuestion.index]"
@input="inputChange($event, questionIndex, subQuestion)">/{{subQuestion.score}}

// ...
inputChange (e, questionNum, subQuestion) {
      let subIndex = subQuestion.index
      // hideSubmit定義在data里了
      if (this.hideSubmit) { return false }
      let answer = this.questionData[questionNum].answer || []
      answer.length = this.questionData[questionNum].childrenNum

      let inputValue = e.target.value
      if (inputValue && !this.isValideNumber(inputValue)) {
        Tips.alert('分數不在給定范圍內~')
        inputValue = parseInt(inputValue) 
      } else if (inputValue > subQuestion.score) {
        // 提示不能大于總分
        Tips.alert('分數不能大于小題滿分')
        inputValue = parseInt(subQuestion.score)
        this.update = false
        this.update = true
      }
      // 先賦值為空
      e.target.value = ''
      answer[subIndex] = answer[subIndex] || ''
      answer[subIndex] = ''
      this.questionData[questionNum]['answer'] = answer
      // update要賦值，以保證不符合輸入規(guī)則的值正確替換，比如4.6替換成4，大于滿分時替換成滿分
      this.update = false
      this.update = true
     // 再賦值為處理過的值
      setTimeout(() => {
        e.target.value = inputValue
        answer[subIndex] = inputValue
        this.questionData[questionNum]['answer'] = answer
        this.update = false
        this.update = true
      }, 100)
    }
2. 要拿數據循環(huán)的時候，改變其某個屬性上的值時，數據改變了，但是視圖沒有更新

解決方案：
定義一個布爾類型的變量放到頁面上去，改變循環(huán)的數據的某個屬性時，給該變量賦值成false，然后再設置成true

choiceAnswer (questionNum, subIndex, optionName ) {
  // 超過14天后無法修改
  if (this.hideSubmit) { return false }
  let answer = this.questionData[questionNum].answer || []
  answer.length = this.questionData[questionNum].childrenNum
  answer[subIndex] = answer[subIndex] || ''
  if (answer[subIndex].indexOf(optionName)>-1) {
    answer[subIndex] = answer[subIndex].replace(optionName, '')
  } else {
    answer[subIndex] = answer[subIndex].length > 0 ? answer[subIndex].concat(optionName) : optionName
  }
  this.questionData[questionNum]['answer'] = answer
  // 保證頁面上用到數據的該屬性時頁面顯示正常
  this.update = false
  this.update = true
}
3. renderjs視圖層與邏輯層通信

官方文檔里說了renderjs是一個運行在視圖層的js。
非H5端js運行在jscore下而不是瀏覽器里，沒有瀏覽器專用的js對象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等對象。所以使用到renderjs去解決這些問題。

我的需求是，公式渲染后的html里有圖片，點擊圖片可以調用uni.priviewImage方法進行預覽。
但是打包成app后訪問不到window, document, uni對象。

解決方案是在renderjs中監(jiān)聽元素點擊，獲取到所點擊的圖片的src，然后與邏輯層通信，在邏輯層調用uni.priviewImage方法(公式解析的代碼沒有放進來)，核心代碼如下：

<template>
  <section class="m-wrong-topic-equipment" id="knowledgeDetail">
    <div class="m-content" v-html="knowledgeData.content"></div>
  </section>
</template>
<script>
export default {
  data () {
    return {
      knowledgeData: {}
    }
  },
  methods: {
    // 省略部分代碼...
    // 從renderjs中接收到的數據
    acceptFromRenderjs (data) {
      // console.log('從renderjs中接收到的數據', data)
      uni.previewImage({urls: [data]})
    }
  }
}
</script>
<script module="MathJax" lang="renderjs">
  export default {
    mounted() {
      // 監(jiān)聽dom點擊，題目內有圖片可點擊預覽
      setTimeout(() => {
        let parentDom = window.document.getElementById('knowledgeDetail')
        parentDom.addEventListener('click', (e) => {
          if (e.target.src) {
            this.messageData(e.target.src)
          }
        })
      }, 1000)
    },
    methods: {
      // 與邏輯層通信
      messageData (data) {
        this.$ownerInstance.callMethod('acceptFromRenderjs', data)
      }
    }
  }
</script>

文檔里有說明：視圖層和邏輯層通訊方式與 WXS 一致，另外可以通過 this.$ownerInstance 獲取當前組件的 ComponentDescriptor 實例。

4. 使用renderjs加載第三方js——實現MathJax公式解析
<template>  
    <view class="content" :prop="content" :change:prop="MathJax.updateMathJax">  
    {{content}}  
    <button @click="changeHandler">change</button>
    </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {
        content: "9999"  
      } 
    },  
    methods: {
      changeHandler () {
        this.content = '$y=\\frac{1}{5}(3-2x)$'
      } 
    }
  }
</script>  
<script module="MathJax" lang="renderjs">
  export default {
    mounted() {
      if (window && window.MathJax) {
        this.initMathJax()
      } else {
        const script = document.createElement('script')
        script.src = 'https://www.stuspy.com/mathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML'
        script.onload = this.initMathJax.bind(this)
        document.head.appendChild(script)
      }
    },
    methods: {
      initMathJax () {
        MathJax.Hub.Config({
          "HTML-CSS": {
            availableFonts: ["STIX-Web"],
            preferredFont: "STIX-Web",
            linebreaks: { automatic: false },
            undefinedFamily: "STIXGeneral,'Arial Unicode MS',serif",
            EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50),
            webFont: "STIX-Web",
            imageFont: "",
            showMathMenu: false,
            scale: 90
          },
          jax: ["input/TeX", "input/MathML", "output/HTML-CSS", "output/NativeMML", "output/CommonHTML"],
          tex2jax: {
            inlineMath: [
                ["$", "$"],
                ["\\(", "\\)"]
            ],
            displayMath: [
                ["$$", "$$"],
                ["\\[", "\\]"]
            ],
            processEscapes: true,
            ignoreClass: "tex2jax_ignore|dno"
          },
          TeX: {
            extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"],
            noUndefined: {
                attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "100%" }
            }
          },
          messageStyle: "none",
          extensions: ["tex2jax.js", "mml2jax.js", "MathMenu.js", "MathZoom.js", "CHTML-preview.js"],
          errorSettings: { message: ["parse..."] },
          SVG: { linebreaks: { automatic: true }, width: "100% container" },
          menuSettings: { CHTMLpreview: true }
        })
        MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])
      },
      updateMathJax () {
        if (!MathJax) { return false }
        MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])
      }
    }
  }
</script>

<style lang="scss">  
.content{font-size: 18px;margin-top: 150px;}  
</style>
5. 子組件里的生命周期無法觸發(fā)

只能使用create生命周期去構造了，如果不能滿足的話就另想其他辦法了

6. input的placeholder樣式無法直接覆蓋

使用placeholder-class屬性設置一個類名，再用該類名寫樣式去覆蓋掉原有的樣式

 <input type="text" v-model="searchName" placeholder="請輸入名字"
    placeholder-class="search-placeholder"/>
7. v-html渲染的圖片寬度過大

使用js給img標簽添加行內樣式以達到目的

<view class="m-card-content" v-html="equipmentData.equipmentContentHtml"></view>

...
async onLoad (options) {
      // 獲取 equipmentData
      let res = await this.$collectorApi.fetchEquipment(options.id)
      this.equipmentData = res.result
      // 獲取 equipmentContentHtml里img標簽添加行內樣式
      this.equipmentData.equipmentContentHtml= this.equipmentData.equipmentContentHtml
        .replace(/\<img/gi, '<img style="max-width:100%;" ')
    }

8. HbuilderX升級到2.9.0+版本后，舊的代碼樣式適配整體被縮小了

經過頑強的詢問，搜索，才知道HBuilderX 2.9.0+ 相關更新：調整根字體大小為系統(tǒng)默認大小與微信小程序平臺一致，調整后 rem 默認大小不再為 窗口寬度/20，改為了瀏覽器（webview）默認的字體大小，一般為 16px
這是社區(qū)給的解決方案： 更新 HBuilderX 2.9.0+ 后 rpx(upx)、rem 樣式變形的處理辦法
我做的項目主要是使用 rpx 的部分變形，使用的解決方案為 寬屏適配指南
在里面找到的解決方案如下：
在 pages.json 的 globeStyle 里配置 rpx 的如下參數

"globalStyle": {
  // 省略部分代碼...
  "navigationStyle": "custom",
 // rpx 計算特殊處理的值，始終按實際的設備寬度計算，單位 rpx，默認值為 750
  "rpxCalcIncludeWidth": 750 , 
 // rpx 計算所支持的最大設備寬度，單位 px，默認值為 960，我要適配的屏幕寬度為1280，
 // 所以這里的值調整為1280 
  "rpxCalcMaxDeviceWidth": 1280
}

9. 引入vant微信小程序組件 1.10.17，運行到H5報錯

引入vant
image.png
報錯信息：
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
Unclosed bracket...

解決方案：
找到wxcomponents/dist/icon/index.wxss文件,搜索url,在后兩個url前增加空格


image.png

10. vue.config.js 中設置代理無效

解決方案：去manifest.json中設置,
后臺請求地址形如：http://xxx.com.cn/store-front/api/user
設置代理后請求地址形如：localhost:3333/store-front/api/user

 "h5" : {
        "devServer" : {
            "https" : false,
            "disableHostCheck" : true,
            "proxy" : {
                // 使用代理
                "/store-front" : {
                    "target" : "http://xxx.com.cn", // 目標地址
                    "changeOrigin" : true,
                    "secure" : false,
                    // 設置地址重定向
                    "pathRewrite" : {
                        "^/store-front" : "/store-front" // 設置路徑重定向
                    }
                }
            }
        },
        ...
    },
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容