Typechoゼロからの微信ミニプログラム構築 - Wetypecho

Wetypecho のオープンソースコードダウンロードアドレス#

Wethpecho

構築に必要な条件#

WeChat に関して

ドメインが登録済み
サイトが https を有効にしている

サイトに関して

固定リンクを設定
サイトが https を有効にしている

プラグインのインストール#

プラグインのインストールパッケージをダウンロード後、解凍
we-typecho-plugin フォルダの名前を WeTypecho に変更重要！
修正したフォルダを /usr/plugins ディレクトリにアップロード
関連データを記入するだけ
注：api キーは自分で設定し、小プログラムの API_SECRET と一致させること

WeChat 小プログラム#

小プログラム APPID の取得
サーバードメインの記入

Snipaste_2019-07-18_11-50-47

小プログラム端の設定#

小プログラムのソースコードに入る
ルートディレクトリの config.js を開く

var domain = "ブログアドレス"
var name = "小プログラムのフッター名"
var API_SECRET = "プラグインのapiキーと一致"

export default {
    getdomain: domain,
    getname: name,
    getapisecret: API_SECRET
}

app.json

{
  "debug": true,
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#f5f5f5",
    "navigationBarTitleText": "小プログラム名",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
  },

Template/foot.wxml

<template name="foot">
    <view class="footerview">  
    <text >著作権情報</text>
    </view>
    <view class="footerviewwebsite">  
    <text style>著作権情報</text>
    </view>
</template>

よくある質問#

小プログラムのデバッグエラー：登録されているか、https が有効か
画像のサムネイルが表示されない：画像が CDN を使用しているか、画像の CDN アドレスが WeChat 小プログラムの合法ドメインに追加されているか、CDN のホワイトリストなど

上記の問題を確認しても画像が正常に表示されない場合、テーマとプラグインに衝突がある可能性があります。このブログのテーマでは、記事に他のフィールドを追加した後、再発行するとサムネイルが正常に表示されなくなります。

小プログラムアドレス#

小プログラム QR コード

小プログラムの UI を変更
不要な機能を削除
記事内ページからホームページに戻るボタンなどを追加