WeChat アプレット バックグラウンド データ インタラクションと wxs ファイルの導入と使用

バックステージで準備

バックグラウンド ソース コードの共有。. . .

ssm-oa.rar - 蘭作雲

フロントエンド テスト コードの共有

oa-mini.rar - 蘭作雲

フロントエンド送信リクエストのカプセル化

約束する

Promise は、従来のソリューション (コールバック関数とイベント) よりも論理的で強力な非同期プログラミングのソリューションです。コミュニティによって最初に提案され、実装されました. ES6 はそれを言語標準に書き込み、使用法を統一し、Promise オブジェクトをネイティブに提供しました.

いわゆる Promise は、将来終了するイベント (通常は非同期操作) の結果を保持する単純なコンテナーです。構文的には、Promise は非同期操作のメッセージを取得できるオブジェクトです。Promise は統一された API を提供し、さまざまな非同期操作を同じ方法で処理できます。

• promise オペレーションには 3 つの状態があります。
  • pending: promise が作成されるとすぐに待機中 (進行中)、保留中は進行中です
  • 履行: 成功 (完了)。解決を呼び出すと、状態が保留中から履行済に変更され、将来実行されます。
  • reject: 失敗 (拒否)。reject を呼び出すと、ステータスが保留から拒否に変更され、今後 .catch が実行されます
• 気をつけて：
  • promise の状態が変更されると、状態は凍結されます
  • 再度 reject または resolve を呼び出すと、状態を変更しても意味がありません

登録要求インターフェイス アドレス

config/api.js を作成する

 

// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
 
 module.exports = {
  IndexUrl: WxApiRoot + 'home/index', //首页数据接口
  SwiperImgs: WxApiRoot+'swiperImgs',
  MettingInfos: WxApiRoot+'meeting/list',
  AuthLoginByWeixin: WxApiRoot + 'auth/login_by_weixin', //微信登录
  UserIndex: WxApiRoot + 'user/index', //个人页面用户相关信息
  AuthLogout: WxApiRoot + 'auth/logout', //账号登出
  AuthBindPhone: WxApiRoot + 'auth/bindPhone' //绑定微信手机号
 };

カプセル化リクエスト

/utils/util.js 内

/**
 * 封装微信的request请求
 */
function request(url, data = {}, method = "GET") {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method,
      header: {
        'Content-Type': 'application/json',
      },
      success: function (res) {
        if (res.statusCode == 200) {
            resolve(res.data);//会把进行中改变成已成功
        } else {
          reject(res.errMsg);//会把进行中改变成已失败
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  });
}

 

リクエストを送る

ライフサイクル関数のメソッドを使用して、ページが読み込まれた後にバックグラウンドによって返されるデータを確認します

 

 

loadMeetingInfos(){
    let that=this;
    // wx.request({
    //     url: api.MettingInfos,
    //     dataType: 'json',
    //     success(res) {
    //       console.log(res)
    //       that.setData({
    //           lists:res.data.lists
    //       })
    //     }
    //   })
    util.request(api.IndexUrl).then(res=>{
        console.log(res))
      this.setData({
        lists:res.data.infoList
      })
    }).catch(res=>{
        console.log('服器没有开启，使用模拟数据!')
    })
  }

WXS モジュールの使用

WeChat公式文書アドレス

 

index.wxml

<view class="container">
<view>{
   
   {common.msg}}</view>
<view>{
   
   {common.foo}}</view>
<view>{
   
   {foo.value}}</view>
</view>
<!-- module 当前 <wxs> 标签的模块名。必填字段。 -->
<!-- src 引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。 -->
<!-- 单标签 引入wxs文件-->
<wxs src="../wxs/common.wxs" module="common" />
<!-- 双标签 -->
<wxs module="foo">
var common = require('../wxs/common.wxs')
// 在.wxs模块中引用其他 wxs 文件模块， 可以使用 require 函数。
module.exports = {
value: common.inArray([1, 2, 3], 1)
}
// 方法一：单行注释
/*
方法二：多行注释
//
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
</wxs>

index.wxss

.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
background-color: rgb(240, 240, 240);
}

common.wxs

var foo="'hello world' from common.wxs"
//inArray方法  判断数组中是否存在某元素
function inArray(arr,val){
return arr.indexOf(val)>-1
}
var msg="some msg"
//module 对象  每个 wxs 模块均有一个内置的 module 对象。
//属性  exports: 通过该属性，可以对外共享本模块的私有变量与函数。
module.exports={
foo:foo,
inArray:inArray
}
module.exports.msg=msg

 

WXS使用上の注意

WXS モジュール

WXS コードは、wxml ファイル内のタグ内、または .wxs 拡張子を持つファイル内に記述できます。

モジュール

• 各 .wxs ファイルとタグは個別のモジュールです。
• 各モジュールには、独自の独立したスコープがあります。つまり、モジュールで定義された変数と関数はデフォルトで非公開であり、他のモジュールからは見えません。
• モジュールが内部のプライベート変数と関数を公開したい場合、それは module.exports を通じてのみ実現できます。

関数が必要

• .wxs モジュール内の他の wxs ファイル モジュールを参照するには、require 関数を使用できます。
• 引用するときは、次の点に注意してください。
• 参照できるのは .wxs ファイル モジュールのみであり、相対パスを使用する必要があります。
• すべての wxs モジュールはシングルトンです. wxs モジュールが初めて参照されると、自動的にシングルトン オブジェクトとして初期化されます。複数のページ、複数の場所、複数の参照はすべて同じ wxs モジュール オブジェクトを使用します。
• wxs モジュールが定義後に参照されていない場合、モジュールは解析および実行されません。

<wxs> タグ

属性名	の種類	デフォルト	例証する
モジュール	弦		現在のタブのモジュール名。必須フィールド。
ソース	弦		.wxs ファイルの相対パスを参照します。このタグが単一の閉じたタグであるか、タグのコンテンツが空の場合にのみ有効です。

モジュール属性

• module 属性は、現在の <wxs> タグのモジュール名です。1 つの wxml ファイル内では、その値を一意にすることをお勧めします。重複するモジュール名がある場合は、順番に上書きされます (後者は前者を上書きします)。異なるファイル間の wxs モジュール名は互いに上書きされません。
• モジュール属性値の命名は、次の 2 つの規則に従う必要があります。

最初の文字は、英字 (a-zA-Z)、アンダースコア ( )でなければなりません。

残りの文字は、文字 (a-zA-Z)、アンダースコア ( )、数字 (0-9) です。

ソース属性

• src 属性を使用して、他の wxs ファイル モジュールを参照できます。
• 引用するときは、次の点に注意してください。

参照できるのは .wxs ファイル モジュールのみであり、相対パスを使用する必要があります。

すべての wxs モジュールはシングルトンです. wxs モジュールが初めて参照されると、自動的にシングルトン オブジェクトとして初期化されます。複数のページ、複数の場所、複数の参照はすべて同じ wxs モジュール オブジェクトを使用します。

wxs モジュールが定義後に参照されていない場合、モジュールは解析および実行されません。

知らせ

• < wxs > モジュールは、モジュールを定義する WXML ファイル内でのみアクセスできます。または を使用すると、モジュールは対応する WXML ファイルにインポートされません。
• <template> タグでは、<template> を定義する WXML ファイルで定義されている <wxs> モジュールのみを使用できます。

変数

概念

let const はサポートしていません

WXS の変数は、値への参照です。

宣言されていない変数は直接代入して使用され、グローバル変数として定義されます。

値を割り当てずに変数を宣言すると、デフォルト値は未定義になります。

var のパフォーマンスは javascript と一致しており、変数の昇格があります。

var foo = 1
;var bar = "hello world";
var i; // i === undefined

上記のコードは、3 つの変数 foo、bar、i をそれぞれ宣言しています。次に、foo には値 1 が割り当てられ、bar には文字列 "hello world" が割り当てられます。

変数名

• 変数の命名は、次の 2 つの規則に従う必要があります。
• 最初の文字は、文字 (a-zA-Z)、アンダースコア () でなければなりません。

残りの文字は、文字 (a-zA-Z)、アンダースコア ()、数字 (0-9) です。

予約済み識別子

次の識別子は変数名として使用できません。

delete
void
typeof
null
undefined
NaN
Infinity
var
if
else
true
false
require
this
function
arguments
return
for
while
do
break
continue
switch
case
default

ノート

<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释
/*
方法二：多行注释
//
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
var a = 1;
var b = 2;
var c = "fake";
</wxs>