Take you to experience the complete development process of WeChat mini program

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 development process of the mini program if you receive an invitation for internal testing. In fact, everyone can experience it. Here is Let everyone know together.

Download WeChat Web Developer Tools

First of all, WeChat provides us with its own small program integrated development tools. You only need to go to this Just download the page:

After the download is completed, open the developer tools, and there will be a scan 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, app.wxss in the root directory. Among them, app.js is the script file for the main entrance 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 a local cache data with logs as 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 the time being, 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:

f86f000cc2f5f0bdf6121d4a2efc945f 784587b1498d75817f24f95fb36cca10 3d048a2b9ff2c224f697c32c3f24dc4ef8e950ebc6c1ea27f76cf997b9216fe6 277932af4e9676f3c247b090853cb2a7{{userInfo.nickName}}273e21371c5d5e701d3c98517a0bfa41 de5f4c1163741e920c998275338d29b2 a675b38a74d9bf96543e9ed6fb1ac95e 2602ac4605743953d5d7d0fd8c968325{{motto}}273e21371c5d5e701d3c98517a0bfa41 de5f4c1163741e920c998275338d29b2 de5f4c1163741e920c998275338d29b2 -->

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

<!-- 784587b1498d75817f24f95fb36cca10 3d048a2b9ff2c224f697c32c3f24dc4ef8e950ebc6c1ea27f76cf997b9216fe6 277932af4e9676f3c247b090853cb2a7{{userInfo.nickName}}273e21371c5d5e701d3c98517a0bfa41 de5f4c1163741e920c998275338d29b2 -->

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

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

再来看看第二个视图：

<!-- a675b38a74d9bf96543e9ed6fb1ac95e 2602ac4605743953d5d7d0fd8c968325{{motto}}273e21371c5d5e701d3c98517a0bfa41 de5f4c1163741e920c998275338d29b2 -->

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 an implementation similar to React Native.

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.

The above is the detailed content of Take you to experience the complete development process of WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!