Quick Start

This guide will help you get started with Ink Mini Program development quickly.

1. Installation

First, we need to create an Ink Mini Program project. You can use the npm create command to quickly generate the project structure:

npm create ink-mini-program my-ink-app

Follow the command line prompts to complete the project initialization.

2. Your First App (Hello World)

Let's understand the basic structure of an Ink Mini Program through a simple Hello World example. This example includes the core files: app.json, app.js, and page files.

Directory Structure

├── app.js              // App Logic
├── app.json            // Global Configuration
├── pages
│   └── index
│       ├── index.js    // Page Logic
│       ├── index.json  // Page Configuration
│       ├── index.wxml  // Page Structure
│       └── index.wxss  // Page Style

Global Configuration (app.json)

app.json is the global configuration file for the mini program, used to configure page paths, window appearance, etc.

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Ink Demo"
  }
}

App Logic (app.js)

app.js defines the lifecycle functions of the mini program.

App({
  onLaunch: function () {
    console.log('App Launch', this)
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

Page Configuration (pages/index/index.json)

index.json is used to configure the window appearance of the current page, which will override the common configuration in app.json.

{
  "navigationBarTitleText": "Index Page"
}

Page Structure (pages/index/index.wxml)

WXML (WeiXin Markup Language) is a tag language designed for the framework. Combined with components and the event system, it can build the structure of the page.

<view class="container">
  <view class="userinfo">
    <text class="user-motto">name: {{userInfo.name}}</text>
  </view>
  <view class="userinfo" style="background-color:blue;">
    <text class="user-motto" style="color:white;">Seconds: {{seconds}}</text>
  </view>
  <view class="userinfo" style="width:500px;height:100px;">
    <text class="user-motto" style="width:500px;color:white;">{{motto}}</text>
  </view>
</view>

Page Style (pages/index/index.wxss)

WXSS (WeiXin Style Sheets) is a style language used to describe the component styles of WXML.

.container {
  display: flex;
}

.userinfo {
  height: 65px;
  margin: 20px;
  padding: 10px;
  border-radius: 15px;
  background-color: green;
}

.user-motto {
  color: black;
  font-size: 25px;
}

Page Logic (pages/index/index.js)

The page logic file handles page data and interactions.

const app = getApp()

Page({
  data: {
    motto: 'In this era of boundless possibilities...',
    userInfo: {
      name: 'Yorkie'
    },
    seconds: 0,
  },
  onLoad: function () {
    console.log('Page Load');
    
    // Update seconds every second
    setInterval(() => {
      var d = new Date();
      this.setData({
        seconds: d.getSeconds()
      });
    }, 1000);
  },
  onShow: function () {
    console.log('Page Show');
  }
})

3. Preview

After finishing the code, you need to use the toolchain provided by Ink to build and preview.

(Specific preview commands or tool usage instructions need to be added here, e.g., using a simulator or real device debugging)