小程序高級(jí)實(shí)戰(zhàn)開發(fā)

hellowoody 發(fā)布于2019-06-28 18:45 / 2945人閱讀

摘要：微信基本組件的高級(jí)解讀數(shù)據(jù)綁定，記住使用列表，使用，同時(shí)設(shè)置好。在使用組件，尤其是組件套組件時(shí)，特別注意此類事件。不設(shè)置該方法，頁面不支持分享如何發(fā)送模板消息小程序需要做什么在小程序段必須使用，獲取到并和其他數(shù)據(jù)一起傳給服務(wù)器。

1.微信基本組件的高級(jí)解讀

數(shù)據(jù)綁定，記住使用{{}}

列表，使用wx:for，同時(shí)設(shè)置好wx:key。不然，編輯器總是有紅色警告。

條件，使用wx:if,wx:else or wx:elif

模板不建議大量使用用，因?yàn)闊o法使用自己的樣式

事件，強(qiáng)記下哪些冒泡事件和非冒泡事件。在使用組件，尤其是組件套組件時(shí)，特別注意此類事件。

引入，import = 引入模板文件，include = 復(fù)制文件源碼， @import 引入樣式文件

wxss，理解并使用rpx來替代px

2.自定義組件的使用 a 自定義組件的使用場(chǎng)景

可以抽象，并重復(fù)使用的就可以做成組件。
比如：分享組件、Tab組件、Pannel組件等等。

b 示例

***組件使用，支持服務(wù)器下發(fā)分享按鈕文本和分享內(nèi)容***

***share.js***
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    text: {
      type: String,
      value: "分享給好友"
    }
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
  },
  /**
   * 組件的方法列表
   */
  methods: {
    onTapButton (e) {
      this.triggerEvent("tapbutton", {e})
    }
  }
})

***share.wxml***

***share.wxss***
@import "../../static/wxss/common.wxss";
.button {
  background: linear-gradient(#AEAEF9, #9ED1FA);
  box-shadow: 1rpx 1rpx 1rpx 1rpx #C28230;
    position: fixed;
  align-content: center;
    bottom: 30rpx;
    width: 30%;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
  margin: 0 35%;
  color: white;
  line-height: 60rpx;
}

效果圖

3.目錄結(jié)構(gòu)規(guī)劃

4.常用組件的封裝 b 請(qǐng)求api

***使用***
// 獲取金幣收入列表
var Request = require("request.js")
function getIncome(page = 1, success) {
  var url = Common.API + "/User/MyIncome/" + page
  Request.Get(url, success)
}

***request.js***
function Get(url, success, err = errhandle, header = HEADER) {
  ShowLoading()
  return wx.request({
    url: url,
    success: function (res) {
      // console.log("geturl", res)
      wx.hideLoading()
      if (res.statusCode != 200) {
        err(res.data)
        return
      }
      success(res.data.data)
    },
    header: header
  })
}

function Post(url, data, success, err = errhandle, header = HEADER) {
  wx.hideLoading()
  return wx.request({
    url: url,
    data: data,
    method: "POST",
    success: function (res) {
      wx.hideLoading()
      if (res.statusCode != 200) {
        err(res.data)
        return
      }
      success(res.data.data)
    },
    header: header
  })
}

module.exports = {
  Get: Get,
  Post: Post
}

c 分享組件

見本文

5.生命周期分析

onLoad：初始化數(shù)據(jù)，包括：從服務(wù)器獲取頁面數(shù)據(jù)

onReachBottom：可用于，列表加載下一頁。

onShareAppMessage：設(shè)置頁面分享數(shù)據(jù)。不設(shè)置該方法，頁面不支持分享

6.如何發(fā)送模板消息 a 小程序需要做什么

在小程序段必須使用form，獲取到form_id,并和其他數(shù)據(jù)一起傳給服務(wù)器。

b 后端需要如何操作

在小程序后臺(tái)申請(qǐng)模板消息，發(fā)送消息是帶上form_id.

*** php代碼示例，使用lavavel框架，和easywechat組件 ***
public static function SendTpl($uid, $coin, $formId, $page = "pages/index/index")
    {
        $find = User::find($uid);
        if ($find) {
            $data = [
                "touser" => $find->openid,
                "template_id" => "Bg7IEAsOqXhFsjkcu3Wdz7Im6HTbBYIdgq_T9EnfcSY",
                "page" => $page,
                "form_id" => $formId,
                "data" => [
                    "keyword1" => "您有一筆金幣入賬",
                    "keyword2" => $coin . "金幣",
                    "keyword3" => "哇~有這么多金幣呢~~趕快到商店里看看，可以兌換好東西哦~"
                ]
            ];
            $miniprogram = EasyWeChat::miniProgram();
            $miniprogram->template_message->send($data);
        }
    }

7.巧計(jì) a 片段代碼的使用技巧 b 與后端的安全認(rèn)證 8.遇到的一些坑 a 定義在tabbar的頁面，不能使用wx.navigateTo 應(yīng)該使用wx.switchTab b 在小程序外，如何帶參數(shù)？以及如何獲取參數(shù)？

pages/index/index?pid=12直接在頁面后帶參數(shù)

獲取參數(shù)：

onLoad: function (options) {
  if (options.pid) {
      this.apprentice(options.pid)
    }
}

c 組件內(nèi)列表場(chǎng)景下，點(diǎn)擊按鈕，如何帶上所選行參數(shù)？

** js組件的方法列表**
  methods: {
    onTapButton(e) {
      var detail = e.detail.target.dataset.detail
      detail["formId"] = e.detail.formId ? e.detail.formId : ""
      console.log("tapbutton", e, detail)
      this.triggerEvent("tapbutton", { detail: detail, event: e }) // , formId: formId
    }
  }

*** wxml ***

***頁面使用***
bindExchange (e) {
    app.aldstat.sendEvent("商城-商品-" + e.detail.detail.title);
    wx.navigateTo({
      url: "../exchange/exchange"
    })
  }

d 自定義組件，組件內(nèi)的樣式如果需要使用公共樣式，需要多帶帶引入。

云服務(wù)器 GPU云服務(wù)器高級(jí)php的實(shí)戰(zhàn)開發(fā) 嵌入式linux驅(qū)動(dòng)程序?qū)崙?zhàn)開發(fā) 開發(fā)小程序程序開發(fā)小程序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/28617.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hellowoody

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Hostinger：美國虛擬主機(jī)，首月9.9元起，美國vps，首月27元起

閱讀 3445·2021-11-08 13:20
TikTok 月活躍用戶達(dá)到 10 億

閱讀 3373·2021-09-30 09:48
SiteGround虛擬主機(jī)支持Brotli壓縮技術(shù) 網(wǎng)站速度提高15-20％

閱讀 2576·2021-09-29 09:41
個(gè)人云主機(jī)有什么用-如果你有一臺(tái)云主機(jī)，你會(huì)用來做什么呢？

閱讀 597·2021-09-22 15:04
Vultr機(jī)房測(cè)評(píng) - Vultr英國倫敦London機(jī)房綜合速度和線路去程回程測(cè)試

閱讀 2487·2021-08-23 09:44
UCloud推出U位智能資產(chǎn)管理服務(wù)，助力托管用戶進(jìn)一步降本增效

閱讀 3686·2020-12-03 17:26
跨站腳本攻擊XSS

閱讀 1017·2019-08-30 14:10
應(yīng)用現(xiàn)代CSS創(chuàng)建React App項(xiàng)目

閱讀 1574·2019-08-29 18:34

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

小程序高級(jí)實(shí)戰(zhàn)開發(fā)

相關(guān)文章