小程序開發注意事項

在小程序開發中,遇到的一些小坑。git

1. 輪番圖 swiper


autoplay='false' 不會生效,依然會輪番。由於他會把false看成字符串處理

clipboard.png

解決方法是:
(1) autoplay='{{false}}'直接這麼寫,就能夠看成boolean值來處理了。
(2) <swiper class='swiper' indicator-dots="true" indicator-active-color='#FFFFFF' autoplay='{{autoplay}}'></swiper>
在js中定義:
autoplay: false,

2. 給組件加背景圖


官方回答:背景圖片不支持本地路徑的圖片。
https://developers.weixin.qq.com/community/develop/doc/00066ee652084027fb37cca3c51c00?highLine=%25E8%2583%258C%25E6%2599%25AF%25E5%259B%25BE%25E7%2589%2587
本地資源沒法經過 WXSS 獲取,background-image:可使用網絡圖片,或者 base64,或者使用<image/>標籤。可是不能使用本地圖片。

3. textarea標籤的默認值設置無效


clipboard.png
咱們把value設置爲任意值,是不能改變輸入框的值的。方法是
<textarea >{{''}}</textarea>
就能夠設置textarea組件的默認值爲空。github


4. wxs

======小程序

在小程序的WXML文件中的{{}}裏面,不支持複雜的表達式,目前支持簡單的三元運算、算數運算、邏輯判斷、字符串運算、數據路徑運算。若是咱們頁面中要計算 '9, 7'.indexOf('3') < 0 等相似的簡單方法,之間{{'9, 7'.indexOf('3') < 0}} 確定是不被支持的。因此咱們就用到了WXS。網絡

WXS是小程序的一套腳本語言,能夠結合WXML,一塊兒構建頁面。app

WXS與JavaScript是不一樣的語言,有本身的語法。
WXS不能調用其餘JavaScript文件中的函數。
WXS不能調用小程序提供的接口API。
WXS不能做爲組件的事件回調。函數

用法:
(1)直接在WXML文件中寫,例如spa

<wxs module="m1">
        var msg = "hello world";
        module.exports.message = msg;
  </wxs>

  <view> {{m1.message}} </view>

(2)單獨寫在.wxs文件中3d

/pages/comm.wxs
        var foo = "'hello world' from comm.wxs";
        var bar = function(d) {
          return d;
        }
        module.exports = {
          FOO: foo,
          bar: bar
        };
    
    在用到的WXML文件中引入


        <wxs src="./../comm.wxs" module="tools" />
        <view> {{tools.bar(tools.FOO)}} </view>

5.改變swiper組件,點的位置

/* 改變swiper中三個點的位置 */
    .swiper .wx-swiper-dots {
      display: block;
      height: 100rpx;
      position: absolute;
      left: 650rpx;
      bottom: 60rpx;
    }

寫了一個swiper,效果以下,若是有人須要能夠本身去git上下載。
地址 https://github.com/DaYuXiaoZh...code

clipboard.png

6.模板中引用app.js的全局變量


模板文件不能使用 app.js 文件中定義的全局變量blog

clipboard.png

7. wxs文件中不能使用let聲明變量

不能使用let 不能使用let

clipboard.png

1-- 正確2-- 不能正常運行

相關文章
相關標籤/搜索