首頁 微信小程式 小程式開發 值得一看的微信小程式開發經驗總結

值得一看的微信小程式開發經驗總結

Mar 10, 2017 pm 03:44 PM
小程式開發

本篇文章主要介紹值得一看的微信小程式開發經驗總結,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

一: 參數傳值的方法

1: data-id

我們可以為HTML元素加入data-*屬性來傳遞我們需要的值,使用方法說明:

(1)設定data-id

#
<view class="block" bindtap="playTap" data-id="{{modle.id}}">
登入後複製

(2): 取值+ 傳值

#
playTap:function(e) {
    const dataset = e.currentTarget.dataset;
    wx.navigateTo({
     url: &#39;../play/index?id=&#39;+ dataset.id
    })
    console.log(dataset.id);
  }
登入後複製

(3):取值

onLoad:function (param) {
  //页面初始化
    this.setData({
      currentId:param.id
    })
}
登入後複製

data-注意事項:data-名稱不能有大寫字母,曾經我就因為大寫了一個字母,找了半天的才發現這個錯誤..data-*屬性中不可以存放物件

2: 設定id 的方法標識來傳值

使用方法說明:

(1)設定id

<view bindtap=“playTap" id="{{modle.id}}">
登入後複製

(2)取值

透過e.currentTarget.id取得設定的id的值,然後透過設定全域物件的方式來傳遞數值

3: 在navigator中新增參數傳值

使用方法說明

(1)傳值:在navigator的屬性url後面拼接?id(參數名字)=要傳遞的值(如果多個參數用&分開&name=value&….)

<navigator url="../my/my?id={{item.id}}" wx:for="{{modles}}">
登入後複製

(2)取值:

onLoad (params){
    app.fetch(API.detail + params.id,(err,data) => {
    })
  }
登入後複製

#二:資料請求封裝

1.將所有的介面放在統一的js檔案中並匯出

#
const api = {
  interface1: &#39;https://........&#39;,
   interface2: &#39;https://.......&#39;,
   interface3: &#39;https://....&#39;,
   .....
}
module.exports = api;
登入後複製

2:在app .js中建立封裝請求資料的方法

fetch(url,data, callback) {
   wx.request({
     url,
     data: data,
     header: {
       &#39;Content-Type&#39;: &#39;application/json&#39;
     },
     success(res) {
       callback(null, res.data);
     },
     fail(e) {
       callback(e);
     }
   })
 },
登入後複製

#3: 在子頁面中呼叫封裝的方法請求資料

import API from "../../api/api.js";
const app = getApp();
const conf = {
  data:{
    title:&#39;正在拼命加载中...&#39;,
    loadding:true
  },
  onLoad (){
    app.fetch(API.hot,{},(err,data) => {
    })
  },
登入後複製

三:使用範本(發現範本真是個好東西哦!)

1:定義範本:name設定範本的名字

<template name="homecell">
   <view class="item">
  </view>
 </template>
登入後複製

#2:使用範本

首先引入模板

<import src="../../commonXml/homecell.wxml" />
登入後複製

然後使用模板is後寫模板的name..透過data來傳遞需要是資料

<template is="homecell" data="{{item}}"></template>
登入後複製

四:Array比較好用的屬性與方法

Array.isArray() 方法用來判斷某個值是否為Array。如果是,則傳回 true,否則傳回 false。

concat() 方法將傳入的陣列或非陣列值與原數組合並,組成一個新的陣列並傳回.

forEach() 方法對陣列的每個元素執行一次提供的函數(回呼函數)。

join() 方法將陣列中的所有元素連接成一個字串。

keys() 方法傳回一個陣列索引的迭代器。

map() 方法傳回一個由原始數組中的每個元素呼叫一個指定方法後的返回值組成的新數組

pop() 方法刪除一個數組中的最後的一個元素,並且傳回這個元素。

push() 方法將一個或多個元素新增到陣列的結尾,並傳回陣列新的長度(length 屬性值)。

toString() 傳回字串,表示指定的陣列及其元素。

五:物件Object常用方法

1 初始化方法

var obj = [];
var obj = new obj();
var obj = Object.create(null);
登入後複製

2 新增元素的方法

dic[“key”] = “value”;
登入後複製

3 刪除key的方法

delete dic[“key”];
登入後複製

4 清空詞所有條目

dic.clear();
登入後複製

5 刪除

##

delete dic;
登入後複製

6 查看所有屬性的方法

Object.keys(obj);
登入後複製

物件的所有鍵名都是字串,所以加不加引號都可以,如果鍵名是數值,會被自動轉為字符字串但是,如果鍵名不符合標識名的條件(例如第一個字元為數字,或含有空格或運算符),也不是數字,則必須加上引號,否則會報錯

7 讀取屬性

obj.name || obj[&#39;name&#39;]
登入後複製

注意: 數值鍵名不能使用點運算子(因為會被當成小數點),只能使用方括號運算子。

8 檢查變數是否宣告

if(obj.name) || if(obj[&#39;name&#39;])
登入後複製

9 in 運算子用於檢查物件是否包含某個屬性,如果包含回傳true,否則傳回false

if ( ‘x&#39; in obj) {return 1}
登入後複製

10 for … in 迴圈

用來遍歷一個物件的全部屬性

#

for (var i in obj) {
console.log(obj);
}
登入後複製

11 with 語句

作用: 操作同一個物件的多個屬性時,提供一些書寫的方便

with(obj) {
name1 = 1;
name2 = 2;
}
登入後複製

#等同於

obj.name1 = 1;
obj.name2 = 2;
登入後複製

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持PHP中文網。

以上是值得一看的微信小程式開發經驗總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

小程式開發中的PHP權限管理與使用者角色設定 小程式開發中的PHP權限管理與使用者角色設定 Jul 04, 2023 pm 04:48 PM

小程式開發中的PHP權限管理與使用者角色設定隨著小程式的普及和應用範圍的擴大,使用者對於小程式的功能和安全性提出了更高的要求,其中權限管理和使用者角色設定是保證小程序安全性的重要一環。在小程式中使用PHP進行權限管理和使用者角色設定能夠有效地保護使用者的資料和隱私,以下將介紹如何實現此功能。一、權限管理的實作權限管理是指依據使用者的身分和角色,授予不同的操作權限。在小

PHP在小程式開發的頁面跳轉與路由管理 PHP在小程式開發的頁面跳轉與路由管理 Jul 04, 2023 pm 01:15 PM

PHP在小程式開發的頁面跳轉與路由管理隨著小程式的快速發展,越來越多的開發者開始將PHP與小程式開發結合。在小程式開發中,頁面跳轉和路由管理是非常重要的一部分,它能夠幫助開發者實現頁面之間的切換和導航操作。 PHP作為常用的伺服器端程式語言,可以很好地與小程式互動和資料傳遞,下面我們來詳細了解PHP在小程式中的頁面跳轉與路由管理。一、頁面跳轉基

如何在uniapp中實現小程式開發和發布 如何在uniapp中實現小程式開發和發布 Oct 20, 2023 am 11:33 AM

如何在uni-app中實現小程式開發和發布隨著行動互聯網的發展,小程式成為了行動應用程式開發的重要方向。而uni-app作為一個跨平台的開發框架,可以同時支援多個小程式平台的開發,如微信、支付寶、百度等。以下將詳細介紹如何使用uni-app開發和發布小程序,並提供一些具體的程式碼範例。一、小程式開發前準備在開始使用uni-app開發小程式之前,需要先做一些準備工

小程式開發中的PHP安全防護與攻擊防範 小程式開發中的PHP安全防護與攻擊防範 Jul 07, 2023 am 08:55 AM

小程式開發中的PHP安全防護與攻擊防範隨著行動網路的快速發展,小程式成為了人們生活中重要的一部分。而PHP作為一種強大而靈活的後端開發語言,也被廣泛應用於小程式的開發。然而,安全問題一直是程式開發中需要重視的面向。本文將重點放在小程式開發中PHP的安全防護與攻擊防範,同時提供一些程式碼範例。 XSS(跨站腳本攻擊)防範XSS攻擊是指駭客透過向網頁注入惡意腳本

微信小程式中PHP開發的下拉式選單實作方法 微信小程式中PHP開發的下拉式選單實作方法 Jun 04, 2023 am 10:31 AM

今天我們來學習微信小程式中PHP開發的下拉式選單實作方法。微信小程序是一種輕量級的應用程序,用戶可以在微信裡直接使用,而且不需要下載安裝,非常方便。而PHP是一種非常流行的後端程式語言,也是與微信小程式配合很好的語言。下面我們就來看看如何在微信小程式中使用PHP開發下拉式選單。首先,我們需要準備好開發環境,包括PHP、微信小程式開發工具和伺服器。然後我們

小程式開發中的PHP資料快取與快取策略 小程式開發中的PHP資料快取與快取策略 Jul 05, 2023 pm 02:57 PM

小程式開發中的PHP資料快取與快取策略隨著小程式的快速發展,更多的開發者開始關注如何提高小程式的效能和回應速度。其中一個重要的最佳化手段是使用資料快取來減少對資料庫和外部介面的頻繁存取。而在PHP中,我們可以利用各種快取策略來實現資料快取。本文將介紹PHP中的資料快取原理,並提供幾個常見的快取策略的範例程式碼。一、資料快取原理資料快取是指將資料存放在記憶體中,以

小程式開發中的PHP頁面動畫效果與互動設計 小程式開發中的PHP頁面動畫效果與互動設計 Jul 04, 2023 pm 11:01 PM

小程式開發中的PHP頁面動畫效果與互動設計導語:小程式是一種在行動裝置上運行的應用程序,能夠提供類似原生應用程式的體驗。而在小程式開發中,PHP作為常用的後端語言,可以為小程式頁面增添動畫效果與互動設計。本文將介紹一些常用的PHP頁面動畫效果與互動設計,並附上程式碼範例。一、CSS3動畫CSS3提供了豐富的屬性與方法,用於實現各種動畫效果。而在小

UniApp實作位元組跳動小程式的開發與上線流程解析 UniApp實作位元組跳動小程式的開發與上線流程解析 Jul 06, 2023 pm 05:01 PM

UniApp實作位元組跳動小程式的開發與上線流程解析位元組跳動小程式作為一種新興的行動應用開發方式,正逐漸在業界流行起來。在開發位元組跳動小程式之前,我們需要了解如何使用UniApp來實現開發和上線的流程。一、UniApp簡介UniApp是一套基於Vue.js開發的以HTML5、App、小程式為多端統一開發的框架,透過編寫一套程式碼,可以同時在多個平台上運行,包括字

See all articles