Create Your Own WeChat Mini Program and Pulling External API Data to It

Let’s define our goal in this guide:

  • Create a WeChat mini program named ‘My Burger’
  • Interface: Two Tabs, Two Pages
  • Pages: ‘Home’ and ‘Burger’
  • Home page: static welcome greeting.
  • Burger page: pull burger data from an outside API, then display to the view.

Requirement and Environment

  • A WeChat developer account.
  • Install WeChat Devtools (IDE)
  • Basic HTML / CSS / JavaScript skills

About API policy

  • Your API domain name to add to requestValid Domain Name list n your account Dashboard
  • Your API must be under HTTPS
app.js
app.json
app.wxss
  • app.js: put your app logic code in the JavaScript file.
  • app.wxss: global stylesheet. Think of it as site-wide css file.
  • app.json: app’s configuration file. You define your pages, tabBar, window etc here.
  • /pages/home
  • /pages/burger
{    "pages":[
"pages/home/home",
"pages/burger/burger"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "Home"}, {
"pagePath": "pages/burger/burger",
"text": "Burger"
}]},

"style": "v2",
"sitemapLocation": "sitemap.json"}
"pages":[
"pages/home/home",
"pages/burger/burger"
]
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

.page-title {
font-weight: bold;
align-items: center;
}
<!--pages/home.wxml-->
<view class="container">

<view class="page-title">
<text>Home</text>
</view>

<view class="page-content">
<view>
<text>Hello World!</text>
</view>

<view>
<image src="/images/home_500x700.png" />
</view>

<view>
<text>Welcome to my first WeChat Mini Program.</text>
</view>
</view>

</view>
  • <view> : think of it as a <div> in html
  • <text>: think of it as a <span> or <p> in html
  • <image>: think of it as <img> tag in html
<!--pages/burger/burger.wxml-->
<text class='burger-title'>My Burger</text>

<view class="burger-container">

<view class="swiper-container">
<swiper indicator-dots="true" autoplay="true">
<swiper-item>
<image src="/images/burger01_500x500.png" />
</swiper-item>

<swiper-item>
<image src="/images/burger02_500x500.png" />
</swiper-item>

<swiper-item>
<image src="/images/burger03_500x500.png" />
</swiper-item>
</swiper>
</view>

<view class="burger-data-container">
<view><text>Description: {{description}}</text></view>
<view><text>Price: {{price}}</text></view>
<view><text>Review: {{review}}</text></view>
</view>

</view>
/* pages/burger/burger.wxss */
.burger-container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.burger-title {
color: black;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
margin: 50rpx auto 50rpx auto;
}

.swiper-container {
width: 100%;
background-color: #eeeeee;
padding-top: 50rpx;
margin: 30rpx auto;
}

swiper {
width: 100%;
height: 500rpx;
}

swiper-item {
display: flex;
flex-direction: column;
align-items: center;
}

.burger-data-container {
width: 100%;
background-color: #eeeeee;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
padding-bottom: 30px;
}
<swiper indicator-dots="true" autoplay="true">
<swiper-item>
<image src="/images/burger01_500x500.png" />
</swiper-item>

<swiper-item>
<image src="/images/burger02_500x500.png" />
</swiper-item>

<swiper-item>
<image src="/images/burger03_500x500.png" />
</swiper-item>
</swiper>
<view>
<view><text>{{description}}</text></view>
<view><text>{{price}}</text></view>
<view><text>{{review}}</text></view>
</view>
// pages/burger/burger.js

// if you need to access global data in the global app object
// then app.globalData to access or update data to global
var app = getApp()


Page({

/**
* Page initial data
*/
data: {
description: '',
price: '',
review: ''
},

/**
* Lifecycle function -- Called when page load
*/
onLoad: function(options) {
this.fetchExternalData()

// Because we.request() is async way.
// So we need to do process the fetched results inside its success() function.
// We cannot stack after this method call since it will not get the data.

},

/**
* Custom functions -- Called in Lifecycle function.
*
* Utility functions:
* fetchExternalData(): request external API to get data.
* saveAPIResources(): save API data to page data object or global data object (depends on your needs)
* updatePageView(): update to page view (display).
*/

fetchExternalData: function() {
// Make a varible 'that' pointing to this Page object
var that = this;

wx.request({
url: 'https://api.yoursite.com/burger/get',

success(res) {
console.log('Requested success.')
console.log(res.data)

// Store data
that.saveAPIResources(res.data)

// Update page view with teh data
that.updatePageView()
},

fail: function(error) {
console.log(error)
}
})
},

saveAPIResources: function(data) {
// Option 1: Save to this Page's data
this.data.price = data.price;
this.data.description = data.description;
this.data.review = data.review;

// Option 2: Save to app's globalData
// Append a burger data obj to globalData
app.globalData.burger = {
'price': data.price,
'description': data.description,
'review': data.review
}

},

updatePageView: function() {
// Option 1: update page view with this page's data.
this.setData({
description: this.data.description,
price: this.data.price,
review: this.data.review
})

// Option 2: update page view with app's global data.
this.setData({
description: '(from global) ' + app.globalData.burger.description,
price: '(from global) ' + app.globalData.burger.price,
review: '(from global) ' + app.globalData.review
})

}

})
onLoad: function() { 
// ...

fetchExternalData()

// ...
}
wx.request()
  • Firstly save the resource to the app’s data object.
  • Secondly, update the burger’s view with the JSON data.
success: function() {

saveAPIResources()

updatePageView()

}
saveAPIResources: function(data) {

// Option 1: Save to this Page's data
this.data.price = data.price;
this.data.description = data.description;
this.data.review = data.review;

// Option 2: Save to app's globalData
// Append a burger data obj to globalData
app.globalData.burger = {
'price': data.price,
'description': data.description,
'review': data.review
}

}
var app = getApp()
updatePageView()
updatePageView: function() {

setData({
description: some_data,
price: some_data,
review: some_data
})

}

--

--

--

I occasionally write about software, web, blockchain, machine learning, random thoughts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Ultimate Guide to Array methods in JavaScript

Image Upload in NodeJs using Multer and Cloudinary version 2

The sum of three angles of an isosceles triangle is: (CSS MPT 2022)

Infinite Scroll As A Design Pattern

Two Sum Part ll

Drop in Copy to Clipboard function

JavaScript: Debouncing | Flipkart UI Interview Question.

JavaScript: Who Is This?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Weiming Chen

Weiming Chen

I occasionally write about software, web, blockchain, machine learning, random thoughts.

More from Medium

First Project: Terminal Wordle.py

Create Timer Web App with Alan AI voice assistant features

Deploying an English Speech to Text model to heroku

From Concept to Completion: The Journey of an App — Part IX