banner
阿道

阿道

阿道博客

Building WeChat Mini Programs with Typecho from Scratch

WeTypecho Open Source Code Download Address#

Wethpecho

Necessary Conditions for Setup#

WeChat Side

  • Domain has been filed
  • Website has HTTPS enabled

Website Side

  • Set up permalinks
  • Website has HTTPS enabled

Plugin Installation#

  1. After downloading the plugin installation package, unzip it
  2. Rename the we-typecho-plugin folder to WeTypecho Important!
  3. Then upload the modified folder to the /usr/plugins directory
  4. Fill in the relevant data
    Note: The API key is to be set by yourself and should be consistent with the API_SECRET on the mini program side

WeChat Mini Program#

  • Obtain Mini Program APPID
  • Fill in the server domain name

Snipaste_2019-07-18_11-50-47

Mini Program Configuration#

  • Access the mini program source code
  • Open config.js in the root directory
var domain = "Blog Address"
var name = "Mini Program Footer Name"
var API_SECRET = "Consistent with the plugin API key"

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

app.json

{
  "debug": true,
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#f5f5f5",
    "navigationBarTitleText": "Mini Program Name",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
  },

Template/foot.wxml

<template name="foot">
    <view class="footerview">  
    <text >Copyright Information</text>
    </view>
    <view class="footerviewwebsite">  
    <text style>Copyright Information</text>
    </view>
</template>

Frequently Asked Questions#

  • Mini program debugging error: Is it filed and is HTTPS enabled?
  • Thumbnail not displaying: Is the image using CDN, has the image CDN address been added to the WeChat mini program's legal domain name, is it on the CDN whitelist, etc.?

If the above issues have been checked and the images still do not display properly, it may be due to conflicts between the theme and the plugin. This blog's theme will cause thumbnails not to display correctly after adding other fields to the article and then publishing.

Mini Program Address#

Mini Program QR Code

  • Modified the mini program UI
  • Removed some unnecessary features
  • Added buttons such as returning to the homepage from the article inner page
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.