1. WeChat基本コンポーネントの高度な解釈
- データバインディング、使用することを忘れないでください
{{}} - リスト、使用
wx:for、およびセットアップを同時に行いwx:keyます。そうでない場合、エディターには常に赤い警告が表示されます。 - 条件、使用
wx:if、wx:elseまたはwx:elif - 独自のスタイルを使用することはできないため、テンプレートを多用することはお勧めしません。
- イベントでは、どのバブリングイベントと非バブリングイベントに注意してください。コンポーネント、特にコンポーネントセットを使用する場合は、このようなイベントに特に注意してください。
- インポート、
import=テンプレートファイルのインポート、=includeファイルのソースコードのコピー、@importスタイルファイルのインポート - wxss、pxではなくrpxを理解して使用する
2.カスタムコンポーネントの使用
カスタムコンポーネントの使用シナリオ
抽象化して再利用できるコンポーネントは、コンポーネントにすることができます。
例：コンポーネントの共有、タブコンポーネント、パネルコンポーネントなど。
b例
***组件使用，支持服务器下发分享按钮文本和分享内容***
<comp-share text="{{shareconfig.ShareButtonText}}"></comp-share> ***share.js***
Component({
/**
* 组件的属性列表
*/
properties: {
text: {
type: String,
value: '分享给好友'
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onTapButton (e) {
this.triggerEvent('tapbutton', {e})
}
}
})***share.wxml***
<view class="flex items-center">
<button open-type="share" class="button">{{text}}</button>
</view>***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.ディレクトリ構造の計画
4.共通コンポーネントのパッケージ
bリクエスト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：データを初期化します。サーバーからページデータを取得します。
- onReachBottom：リストの次のページをロードするために使用できます。
- onShareAppMessage：ページ共有データを設定します。このメソッドが設定されていない場合、ページは共有をサポートしていません
6.テンプレートメッセージの送信方法
アプレットが行う必要があること
小さなプログラムセグメントでは、フォームを使用してform_idを取得し、それを他のデータと一緒にサーバーに渡す必要があります。
bバックエンドの操作方法
アプレットのバックグラウンドでテンプレートメッセージを申請し、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.狡猾
スニペットコードを使用するためのヒント
b。バックエンドによるセキュリティ認証
8.遭遇した落とし穴
タブバーページで定義されています。wx.navigateToは使用できません。wx.switchTabを使用してください。
bアプレットの外でパラメーターを取得する方法は？そして、パラメータを取得する方法は？
pages/index/index?pid=12ページの直後にパラメーターを取る
- パラメータを取得します。
onLoad: function (options) {
if (options.pid) {
this.apprentice(options.pid)
}
}c。コンポーネントのリストシーンで、ボタンをクリックします。選択したラインパラメータを取得するにはどうすればよいですか？
** 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 ***
<view class="col-3">
<form bindsubmit="onTapButton" report-submit="{{true}}">
<button class="pannel-btn" type="warn" size="mini" data-detail="{{item}}" plain="{{item.lotery > 0 ? false : true}}" formType="submit">{{item.lotery > 0 ? '兑换' : '补货中'}}</button>
</form>
</view>***页面使用***
bindExchange (e) {
app.aldstat.sendEvent('商城-商品-' + e.detail.detail.title);
wx.navigateTo({
url: '../exchange/exchange'
})
}