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

Two Sum Part ll

Angular 2 and JWT authentication

I gave it my best, but recursion beat me.

React Native — React Navigation

Getting started with Javascript

Dynamic Scoped CSS in Vue

Monitor and Measure Site Performance from Time to Time and Automatically using Speedlify

Click New site from Git

Fun with Destructuring Assignments

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

An App From Scratch: Discovery & Beginning Development

How to Succeed with a Language Learning App: 10 Tips

Social Media App Development Cost

Top Trending Technologies That Will Change Mobile App Development