ホームページ  >  記事  >  WeChat アプレット  >  読む価値のある WeChat ミニプログラム開発経験の概要

読む価値のある WeChat ミニプログラム開発経験の概要

高洛峰
高洛峰オリジナル
2017-03-10 15:44:501621ブラウズ

この記事は主に WeChat アプレット開発の経験をまとめたもので、読む価値があると思いますので、参考として共有します。エディターをフォローして一緒に見てみましょう

パート1: パラメータ値の転送方法

1: data-id

data-* 属性を HTML 要素に追加して、HTML 要素に値を渡すことができます。メソッドの説明:

(1) Set Data-Id

r
<view class="block" bindtap="playTap" data-id="{{modle.id}}">

(2): 値+値

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

(3): 値

onLoad:function (param) {
  //页面初始化
    this.setData({
      currentId:param.id
    })
}
E

データ -注: data-name には大文字を使用できません。長い間検索した後、オブジェクトを data-* 属性に保存できないため、このエラーが見つかりました。 2: id のメソッド識別子を設定します。 value

使用方法:

(1) idを設定します

<view bindtap=“playTap" id="{{modle.id}}">

(2) valueを取得します

e.currentTarget.idを通じて設定されたidの値を取得し、設定しますオブジェクトの形式でグローバルな値を渡します

3: ナビゲーターに渡すパラメーター値を追加します

使用説明

(1) 値を渡す: ナビゲーター属性 url?id (パラメーター名) の後に接続します= 渡される値 (複数のパラメータが & name=value&……で区切られている場合)

<navigator url="../my/my?id={{item.id}}" wx:for="{{modles}}">

(2) Value:

onLoad (params){
    app.fetch(API.detail + params.id,(err,data) => {
    })
  }

2: データリクエストのカプセル化

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) => {
    })
  },

3: テンプレートを使用します (テンプレートはとても良いものだと気づきました!)

1: テンプレートを定義します: name の名前を設定しますテンプレート

<template name="homecell">
   <view class="item">
  </view>
 </template>

2: テンプレートを使用します

まずテンプレートを紹介します

<import src="../../commonXml/homecell.wxml" />

次に、template isを使用し、テンプレートの名前を記述します。データを介してデータを渡すには

<template is="homecell" data="{{item}}"></template>

4: 配列のより便利なプロパティとメソッド

Array.isArray() メソッドは、値が配列であるかどうかを判断するために使用されます。そうである場合は true を返し、そうでない場合は false を返します。

concat() メソッドは、受信した配列または非配列の値を元の配列と組み合わせて新しい配列を形成し、それを返します。

forEach() メソッドは、提供された関数 (コールバック関数) を、配列の要素ごとに 1 回実行します。配列。

join() メソッドは、配列内のすべての要素を文字列に結合します。

keys() メソッドは、配列インデックスの反復子を返します。

map() メソッドは、元の配列の各要素に対して指定されたメソッドを呼び出した戻り値で構成される新しい配列を返します。

pop() メソッドは、配列の最後の要素を削除し、この要素を返します。

push() メソッドは、1 つ以上の要素を配列の末尾に追加し、配列の新しい長さ (length 属性値) を返します。

toString() は、指定された配列とその要素を表す文字列を返します。

5: オブジェクト共通メソッド

1 初期化メソッド

var obj = [];
var obj = new obj();
var obj = Object.create(null);

2 要素の追加メソッド

dic[“key”] = “value”;

3 キーの削除メソッド

rr リー

4 クリアWord のすべてのエントリ

delete dic[“key”];

5 削除

dic.clear();

6 すべての属性を表示するメソッド

delete dic;

オブジェクトのすべてのキー名は文字列であるため、引用符で囲んでも追加することもできません。キー名が数値の場合、キー名が識別名の条件を満たしていない場合(先頭の文字が数字である場合や、スペースや演算子が含まれている場合など)は、自動的に文字列に変換されます。 )、数値ではないため、引用符で囲む必要があります。そうでない場合は、エラーが報告されます

7 属性の読み取り

Object.keys(obj);

注: 数値キー名にはドット演算子を使用できません (ドット演算子が扱われるため)。小数点として)、角括弧演算子のみを使用できます。

8 変数が宣言されているかどうかを確認します

obj.name || obj[&#39;name&#39;]

9 in 演算子は、オブジェクトに特定の属性が含まれているかどうかを確認するために使用されます。

10 for … in ループ

オブジェクトのすべてのプロパティを走査するために使用されます

if(obj.name) || if(obj[&#39;name&#39;])

11 ステートメントを使用して

機能: 同じオブジェクトの複数のプロパティを操作するときに、いくつかの記述の利便性を提供します

if ( ‘x&#39; in obj) {return 1}

for (var i in obj) {
console.log(obj);
}

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

以上が読む価値のある WeChat ミニプログラム開発経験の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。