Share mini program development process examples

The WeChat mini program has quickly become the focus of discussion before it is officially released. So you may think that you can only experience the mini program if you receive an invitation from the closed beta test. The development process of the program is actually not the case. Everyone can experience it. Let’s take you through it together.

Download WeChat Web Developer Tools

First of all, WeChat provides us with its own small program integrated development tool. You only need to download it from this page:

After the download is completed, open the developer tools and there will be a QR code login interface. Use your WeChat code to log in, and then the developer tools will help us create a default project. The file structure of the project is as follows:

All code editing and Run preview can be performed in this developer tool. Next, let’s take a look at the project structure of the WeChat applet.

Project structure

As shown above, there are three files app.js, app.json in the root directory. , app.wxss. Among them, app.js is the script file for the main entry of the program, app.json is the global configuration file, and app.wxss is the style sheet file of the mini program.

Let’s take a look at app.json first:

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
}

This configuration file defines two nodes. pages is the path corresponding to all pages of the mini program, and window is the configuration information of the mini program window. .

Let’s take a look at the style file app.wxss:

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

We don’t need to delve into the specific styles it defines first, we just need to understand the project structure first. Next, let’s take a look at app.js, the main entrance of the program:

//app.js App({
  onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo)
    }else{ //调用登录接口 wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null }
})

An App object is initialized here, and three methods onLaunch, getUserInfo and globalData are defined. Let’s take a look at onLaunch first:

onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

}

First, the wx.getStorageSync method will obtain local cache data with logs as the key. The logs passed into this method do not have any special meaning, they are just used to represent the cache data we use. This mechanism can be understood as similar to iOS's NSUserDefaults.

Then, we want to insert the current date into this cache array logs.unshift(Date.now()) . Finally, call the setStorageSync method to write our new cache content into the local cache.

Because the onLaunch method is the life cycle method of the applet, it will be called when the applet is started, and the current startup date will be recorded and written to the local cache. That's right, the entire onLaunch method does just that.

Let’s take a look at the getUserInfo method. It obtains the current user login information by calling wx.login and wx.getUserInfo functions of the two WeChat platforms, and passes it to the callback function cb:

getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo)
    }else{ //调用登录接口 wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }

}

As for the initial if judgment if(this.globalData.userInfo), we don’t need to delve into it for now, just look at the else part.

页面结构

了解完根目录的几个文件， 咱们再来看看页面文件, 正如咱们刚开始截图中看到的项目结构：

所有的页面都在 pages 文件夹中。 我们这个示例工程中有两个页面 index 和 logs。 还记得我们前面在 app.json 看到的页面配置吗：

"pages":[ "pages/index/index", "pages/logs/logs" ]

正好对应上咱们现在看到的两个目录， 还要记得一点， pages 数组中的第一个元素会作为我们小程序的主页。 切记，index 页面之所以是首页，是因为它是 pages 里面的第一个元素， 而不是因为它的名称是 index。

我们来看看 index 页面的构成， index.js, index.wxml, index.wxss。 index.js 是页面的脚本文件, index.wxml 是页面的 UI 文件， index.wxss 是页面的样式文件。

先看一下 index.js:

//index.js //获取应用实例 var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  }, //事件处理函数 bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs' })
  },
  onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({
        userInfo:userInfo
      })
    })
  }
})

getApp() 方法获取我们的 app 实例。 然后在看 onLoad 方法， 使用我们刚才提到的 getUserInfo 方法获取用户信息，并设置到 data 属性中。

bindViewTap 方法会绑定一个事件，这个事件调用 wx.navigateTo 方法。 这个方法其实就是页面跳转，从代码中也不难看出，跳转到了 logs 页面。

脚本文件就这些内容了，咱们继续再来看看 UI 文件， index.wxml:

<!-- <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> -->

这个就是小程序 index 页面的 UI 文件了，其实就是微信平台定义了一系列组件，最外层是 454c904013ba956423e0e11fb40cf036 还记得 container 么？ 我们在最外层的 app.wxss 定义了它的样式。 它里面包含了两个 View。先来看看第一个：

<!-- <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> -->

首先 bindtap="bindViewTap" 给这个 View 绑定了一个点击事件，也就是我们前面 index.js 对应的这个方法，用户点击这个 View 就会跳转到 logs 页面上。 然后这个 View 里面包含了一个 Image 和 Text， Image 的 src 属性设置为 userInfo.avatarUrl， 代表当前用户的头像， Text 中使用 userInfo.nickName， 代表当前用户的昵称。

这样， index 页面的整体逻辑就都完成了， 还有一个 index.wxss 样式文件，这个咱们就先略过。

再来看看第二个视图：

<!-- <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> -->

motto 其实就是我们在 index.js 中定义的一个属性：

data: {
    motto: 'Hello World',
    userInfo: {}
 }

它会在页面上显示一个 Hello World。

现在，我们切换到调试界面， 就可以看到小程序的主页了， 和我们刚刚描述的 UI 完全一样吧：

这里的用户头像和昵称是动态从你的登录状态中取到的。

然后我们在这里点击用户的头像，就会跳转到 logs 页面， 列出你每次登录小程序的时间点。

Upload Mini Program

Now I have introduced the basic development process of WeChat Mini Program to you. There is also a logs page that has not been introduced, but it has the same basic ideas as the index page. It’s the same, so we won’t go into details. After developing the small program, where do we need to deploy it? I believe everyone has the same problem. The answer is also very simple, switch to the Project tab, and then click the upload button:

Since my environment does not have a beta account, so in The upload area shows that the project is not associated with the AppID. If you have a test account, your AppID will be displayed. Currently, only internal beta accounts can upload mini programs. That's the only difference. If you don't have a beta account, you just can't upload it, but you can develop and test it locally.

This uploading method of the mini program may make you feel a little different. As everyone usually understands, Web apps generally require you to build and maintain your own server. The hosting method of mini programs is actually almost the same as how we develop a native app. Although the front-end uses js, which looks like web technologies, its core ideas are different from traditional web apps. More like a React Native-like implementation.

End

This time, together with everyone, I have completely experienced the overall structure and development ideas of the simplest small program from beginning to end. Personally, I feel that if we can find a suitable entry point, we can still find some good opportunities on the mini program platform. But my point is, don’t think that the emergence of mini programs will subvert anyone immediately, and you don’t need to hear people on the Internet saying that it is difficult for mini programs to become something big to think that they have no chance. Find what you are good at and what users need, and you may be able to create some good products. This time I will also help you with a basic technical review, I hope it will be helpful to you.

【Related Recommendations】

1. Mini Program Internal Test Application Tutorial

2. WeChat Mini Program Application Account Development Experience

3. How to apply for a WeChat mini program and start a WeChat mini program from scratch

The above is the detailed content of Share mini program development process examples. For more information, please follow other related articles on the PHP Chinese website!