用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序開發技巧

Rolan 2019-11-18 00:43

開發小程序這么久了,整理了一些技巧清單,分享出來。 1、backgroundColor 配置無效 頁面配置中 backgroundColor 可以設置窗口顏色: { "backgroundColor": "#f2f2f2" } 復制代碼這么設置完之后發現一點效果都沒有, ...

開發小程序這么久了,整理了一些技巧清單,分享出來。

1、backgroundColor 配置無效

頁面配置中 backgroundColor 可以設置窗口顏色:

{
  "backgroundColor": "#f2f2f2"
}
復制代碼

這么設置完之后發現一點效果都沒有,仔細研究一番,原來窗口顏色指的是最底層。(真想說句:臥槽~)

解決這個問題很簡單,使用 page 選擇器即可:

page {
  background: #f2f2f2;
}
復制代碼

page 是頁面的根節點,也就是h5里的 html,所以可以用來設置一些樣式。

2、改變自定義組件根節點樣式

header組件代碼如下:

<view class="header">
  header
</view>
復制代碼

可以看到渲染出來后發現多出 header 節點。

在大部分開發中跟組件節點并沒有什么用, 但是 某些情況下是會影響樣式的, 比如說彈性布局,這里不貼demo了,反之此技巧必定用到,回頭瞧瞧就行。

我們可以在自定義組件樣式文件使用 :host 選擇器修改跟組件節點:

:host {
  padding: 50px;
}
復制代碼

可以對比上圖盒子模型

3、block標簽是什么

block 標簽其實就類似于 react 中的 Fragment, Vue中的 template

如果沒接觸過 react/vue 沒關系,看下面例子:

<block>
  <view>say</view>
  <view>hello</view>
</block>
復制代碼

渲染后結果, block 節點消失

<view>say</view>
<view>hello</view>
復制代碼

如果沒有block節點,需要這么做:

<!-- 多渲染了跟節點標簽 -->
<view>
  <view>say</view>
  <view>hello</view>
</view>
復制代碼

比較常用的用來配合 wx:if

<block wx:if="{{ show }}">
  <view wx:for="{{ arr }}" wx:key="index">{{ item }}</view>
</block>
復制代碼

4、如何設置背景圖片

搞個背景圖片都費勁 [發火]

平常在h5中設置背景圖片直接引入地址就行

background: url("/example.png");
復制代碼

但是在小程序中竟然不可以。。。

為啥???

小程序: 你只能乖乖引入網絡圖片
xx: mmp, 設置個圖片都搞那么多花樣? 我覺得...
小程序:我不要你覺得, 我要我覺得。
復制代碼

xx了。 只能走后門了。

1、可以將圖片轉成 base64 即可:

background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLXNwaW5uZXIiIHdpZHRoPSIxMDlweCIgIGhlaWdodD0iMTA5cHgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiIHN0eWxlPSJiYWNrZ3JvdW5kOiBub25lOyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC45MTY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC44MzMzMzMzMzMzMzMzMzM0cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg2MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC43NXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDAwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNjY2NjY2NjY2NjY2NjY2NnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzAwMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjU4MzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE1MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC41cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxODAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDAwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNDE2NjY2NjY2NjY2NjY2N3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjEwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzAwMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjMzMzMzMzMzMzMzMzMzMzNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDI0MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4yNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iOS40IiByeT0iNC44IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzAwMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIgdGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjE2NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgzMDAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSI5LjQiIHJ5PSI0LjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDAwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiB0aW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMDgzMzMzMzMzMzMzMzMzMzNzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMzMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjkuNCIgcnk9IjQuOCIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiMwMDAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIHRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSIwcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4KICA8L3JlY3Q+CjwvZz48L3N2Zz4=");
復制代碼

2、內聯節點中使用 backgorund-image

<view style="background-image: url(example.png)">
</view>
復制代碼

這個方法我就不該說出來~ 因為在真機是無效的。。。(欲哭無淚)

3、使用 image 這個方法我也懶得詳細貼demo了, 總之就是使用 image 改改樣式設置到底部即可。

<view>
  <image src="example.png" />
</view>
復制代碼

最后:現在的項目本地圖片使用是非常少的,反正我見過的項目最多也就幾張。 所以設置背景圖片最簡單的方法就是使用base64

5、object-fit無效

在h5中使用 object-fit 特性是非常多的,它可以對圖片保持一定的比例,而不會發生變形, 如果想了解其具體內容到 MDN

在小程序中對圖片使用此特性是沒有效果的

.image {
  object-fit: cover;
}
復制代碼

解決這個問題也很簡單,使用小程序自帶的屬性即可

<image src="example.png" mode="aspectFill"></image>
復制代碼

具體屬性可到官方查看 mode屬性一覽

6、小程序mock數據

在WEB開發中我們會使用 mockjs 進行攔截請求從而模擬數據。

在小程序中也可以使用嗎? 那當然了, 只不過要對小程序 wx.request 處理。

1、安裝 mockjs

npm i mockjs
復制代碼

2、新建 wxMock.js

// 有點水平的應該能看得懂
// 微信底層API都是不能重寫的,所以用到 defineProperty 將其設置可寫
// 之后重寫了底層 wx.request 方法,然后做些處理即可

const __request = wx.request;
const Mock = require('mockjs');

Object.defineProperty(wx, 'request', { writable: true });

wx.request = function (config) {
  if (typeof Mock._mocked[config.url] === 'undefined') {
    __request(config);
    return;
  }

  const resTemplate = Mock._mocked[config.url].template;
  const response = Mock.mock(resTemplate);

  if (typeof config.success === 'function') {
    config.success(response)
  }
  
  if (typeof config.complete === 'function') {
    config.complete(response)
  }
};

module.exports = Mock;
復制代碼

3、使用 wxMock.js

const Mock = require('wxMock.js')

// 平常怎么用的就怎么用
Mock.mock('/api/example', {
  data: { ... }
})
復制代碼

4、在app.js入口文件中引入mock

import "./mock/index.js";
復制代碼

7、圖片寬度100%,高度無法自適應

在WEB開發中當把圖片設置 100% 時,高度會自適應。

小程序就是不行,不行你看:


因為小程序底層已經對 image 添加了寬高了,所以默認就是 240px

解決方法是給 image 元素添加 mode 屬性

<image src="example.png" mode="widthFix"></image>
復制代碼

當添加此模式并給圖片設置 100% 寬度后,小程序自動計算其高度,就可以讓圖片自適應了。

8、properties 能定義多個類型嗎?

我只能先說可以

此特性是小程序基礎庫2.6.5新增的,可能有些小伙伴不知道。

optionalTypes 字段是個數組,指定屬性類型,可以多個。

Component({
  properties: {
    lastLeaf: {
      // 這個屬性可以是 Number 、 String 、 Object 三種類型中的一種
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})
復制代碼

9、跳轉到tabbar無法返回上一層

這個問題我估計每一個開發者都經歷過。

常規頁面跳轉到 tabbar 頁面只能使用 wx.switchTab ,此API有個問題是:跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面

所以當跳轉到 tabbar 頁面左上角返回鍵自然就沒了,所以是無法返回上一層的。

用得比較多的場景就是購物車了, 某個頁面跳轉到購物車不可以返回上一層那體驗不是很差么。

這個問題我就不貼demo了,說下其方案。

  • 自定義導航頭部,新增一個返回鍵
  • 自定義 tabbar 組件, 這個時候就不存在什么 switchTab 跳轉了
  • 將購物車頁面封裝成一個組件,然后新建2個頁面,一個作為tabbar,一個作為常規頁面,目前jd使用這種方案。

總結

微信小程序開發和 web 還是有一些區別的, 小程序的開發靈活度雖然現在沒有那么高,但隨著不斷的迭代更新,會慢慢得到改善,并受到眾多開發者的喜愛。

這篇文章不會斷更,只要有些好的技巧會總結下來并分享。


鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 印度大使 來自: 掘金
必中分分彩在线计划 二分时时彩开奖官网 云南时时彩攻略 快乐十分玩法介绍 云南11选5开奖结果彩 米牛配资 湖北十一选五开奖结果一定牛 北京pk10人工在线预测 甘肃11选5开奖怎么玩 米牛网 期如意期货配资app 云南11选五专家免费预测 股票入门知识软件 广东26选5中奖规则 如何学炒股票新手入门 福建快三跨度走势图 股票指数怎么做