App Extensions

• Refer to Extension Callback Usage

Initial Configuration

• Add an extension page (Web-View component) to your app.json

{
  "pages": [
    "sdk/extensions/webview"
  ]
}

• Import the extension mixins into each page's JavaScript Page object:

mixins: [
  require('/sdk/extensions/functions'),
],

Page Implementation

Insert the navigation link at the appropriate location for each scenario.

• Link-based Navigation

<!-- Assign link data to global state using handleExtensionTap -->
<navigator url="/sdk/extensions/webview"
  bind:tap="handleExtensionTap" 
  data-title="Fresns Manage"
  data-url="{{appUrl}}"
  data-pid="{{post.pid}}"
  data-uid="{{post.author.uid}}"
  data-post-message-key="fresnsPostManage">
  Manage
</navigator>

• Menu-based Navigation

// Extension Web-View Data
const navigatorData = {
  title: 'Fresns Manage',
  url: appUrl,
  pid: post.pid,
  uid: post.author.uid,
  postMessageKey: 'fresnsPostManage',
};

// Assign navigation data to global state
const app = getApp();
app.globalData.navigatorData = navigatorData;

// Navigate to the extension page
wx.navigateTo({
  url: '/sdk/extensions/webview',
});

Navigation Handling

web-view

https://github.com/fresns/client-wechat/tree/3.x/sdk/extensions/webview.js

• The SDK-packaged Web View page automatically handles the navigation links and listens for callback messages.
• Callback messages are stored under the key fresnsCallbackMessage.

Callback Handling

postMessage

https://github.com/fresns/client-wechat/tree/3.x/mixins/fresnsCallback.js

mixins: [
  require('/mixins/fresnsCallback'),
],

• Import the extension mixins into each page’s JavaScript Page object.
• This JS module, which you define yourself, reads and processes stored callback messages.
• For the structure of callback messages, refer to postMessage Documentation.
• After interpreting and handling the callback messages, clear them from storage.