Codakey
Play
← Back to justjavac/awesome-wechat-weapp

How to Deploy & Use justjavac/awesome-wechat-weapp

Awesome WeChat Mini Program Development Resources

This guide provides comprehensive instructions for using the curated collection of WeChat Mini Program development resources.

Prerequisites

Before using these resources, ensure you have:

  • WeChat Developer Account: Register at WeChat Open Platform
  • Node.js: Version 12.0 or higher for development tools
  • Git: For cloning repositories
  • IDE/Text Editor: VS Code, WebStorm, or Sublime Text with WeChat Mini Program plugins
  • WeChat Developer Tools: Download from official site

Installation

  1. Clone the repository:

    git clone https://github.com/justjavac/awesome-wechat-weapp.git
cd awesome-wechat-weapp

  2. Install development dependencies (for tools you plan to use):

    # For WePY framework
npm install wepy-cli -g

# For Taro framework
npm install -g @tarojs/cli

# For mpvue framework
npm install -g vue-cli
vue init mpvue/mpvue-quickstart my-project

# For uni-app
npm install -g @vue/cli
npm install -g @vue/cli-init
vue init dcloudio/uni-preset-vue my-project

  3. Install WeChat Developer Tools:

    • Download from official site
    • Install and log in with your WeChat Open Platform account

Configuration

WeChat Developer Tools Setup

  1. Open WeChat Developer Tools
  2. Select "小程序项目"
  3. Enter project information:
    • 项目名称: Your project name
    • 目录: Path to your project folder
    • AppID: Your WeChat Mini Program AppID
    • 开发模式: 开发模式

Environment Variables

Create a .env file in your project root:

WECHAT_APP_ID=your_app_id
WECHAT_APP_SECRET=your_app_secret
WECHAT_MCH_ID=your_mch_id
WECHAT_API_KEY=your_api_key

Framework-Specific Configuration

For WePY projects (wepy.config.js):

module.exports = {
  'compilers': {
    'less': true,
    'babel': {
      'presets': ['env']
    }
  }
}

For Taro projects (taro.config.js):

const config = {
  projectName: 'myApp',
  date: '2024-01-01',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  }
}

Build & Run

Development

WePY:

# Compile and watch for changes
wepy build --watch

# Run in WeChat Developer Tools

Taro:

# Install dependencies
npm install

# Development mode
npm run dev:weapp

# Build for WeChat Mini Program
npm run build:weapp

mpvue:

# Install dependencies
npm install

# Development mode
npm run dev

# Build for production
npm run build

uni-app:

# Install dependencies
npm install

# Development mode
npm run dev:%PLATFORM%

# Build for production
npm run build:%PLATFORM%

Production

WePY:

wepy build --no-cache

Taro:

npm run build:weapp

mpvue:

npm run build

uni-app:

npm run build:%PLATFORM%

Deployment

WeChat Developer Tools

  1. Open WeChat Developer Tools
  2. Select your project
  3. Click "上传" (Upload)
  4. Fill in version information and upload

CI/CD Integration

For automated deployment, consider these platforms:

GitHub Actions:

name: Deploy WeChat Mini Program
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: npm run build:weapp
      - name: Deploy to WeChat
        run: |
          # Use WeChat Developer Tools CLI or custom script

Tencent Cloud:

  • Use CloudBase Framework for one-click deployment
  • Supports automated deployment and CI/CD pipelines

Troubleshooting

Common Issues

1. Compilation Errors

Error: Cannot find module 'wepy'

Solution: Ensure WePY is installed globally: npm install wepy-cli -g

2. WeChat Developer Tools Connection Issues

Failed to connect to WeChat server

Solution: Check network connectivity and ensure your AppID is correctly configured

3. API Call Failures

API authentication failed

Solution: Verify your AppID and AppSecret in the configuration file

4. Component Not Found

Component not found: xxx

Solution: Check component import paths and ensure components are properly registered

Performance Issues

1. Slow Compilation

  • Use --no-cache flag for fresh builds
  • Clear WeChat Developer Tools cache
  • Consider using build optimization tools like gulp-wxapp-boilerplate

2. Large Bundle Size

  • Use code splitting
  • Remove unused dependencies
  • Optimize images and assets

Framework-Specific Issues

WePY:

  • Ensure wepy.config.js is properly configured
  • Check for version compatibility between WePY and dependencies

Taro:

  • Verify Taro version compatibility with WeChat Mini Program API
  • Check for deprecated API usage

mpvue:

  • Ensure Vue.js version compatibility
  • Check for mpvue-specific syntax issues

Getting Help

  • Join the QQ groups mentioned in the README
  • Check the official WeChat Mini Program documentation
  • Search issues on GitHub repositories
  • Visit the WeChat Mini Program community

Additional Resources

This guide provides a comprehensive overview of setting up and using the WeChat Mini Program development resources. For specific framework usage, refer to their respective documentation.

← Project overviewView alternatives to justjavac/awesome-wechat-weapp →