Shulou(Shulou.com)06/01 Report--

This article mainly introduces how C # programmers learn WeChat Mini Programs's relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this C # programmer how to learn WeChat Mini Programs's article. Let's take a look.

Start

When the client opens Mini Program, it downloads the code package locally for parsing. First, it finds the app.json of the root directory and knows all the pages of Mini Program.

This Index page is our home page. When the client starts, it loads the code of the home page and renders the page through the mechanism of Wechat.

App ({onLaunch () {/ / triggered after Mini Program is started}})

When Mini Program starts, it first uses the onLaunch method of the App () instance defined by App (), which is shared across pages, and of course there are more callback events.

Page ({data: {text: 'init data', array: [{msg:' 1'}, {msg:'2'}]})

When the page loads, the data property is provided to the page and returned to the front end as Json, and then we can try to render this value on the page.

{{text}} {{array [0] .msg}}

There are also many methods in Mini Program pages, such as onReady (), which is triggered when the page is loaded and ready for interaction, and the OnHide () event in which Mini Program is cut into the background. Of course, these are all application-level events, as well as some events that interact closely with users, which are officially called page event handlers.

For example, the worst thing is that WeChat Mini Programs did not have a drop-down event onPullDownRefresh (). I am also lucky to do this thing by myself, but I am also right that this thing is decoupled, just as I just said fart. No, no, no. For example, the following code.

Set "enablePullDownRefresh": true in the .json file to enable the page drop-down loading effect, which can be set for the current page or globally.

{/ / current page "enablePullDownRefresh": true / / current page "backgroundTextStyle": "dark" / / the top shows three dots in dark color} "window": {/ / global "enablePullDownRefresh": true / / global "backgroundTextStyle": "dark" / / the top shows three dots in white}

Then in the js of a page, write a drop-down event, and then something like this.

OnPullDownRefresh:function () {var that = this; that.setData ({currentTab: 0 / / some initial data of the current page, depending on business requirements}) wx.startPullDownRefresh (); this.onLoad (); / / reload onLoad () console.log ('I am refreshing....');}

Through the debugging tools of Wechat developers, we can easily see the record of log, which is the initial data in that setData.

Finally, the refresh is stopped in the onload event.

OnLoad: function (options) {wx.stopPullDownRefresh () / / stop the drop-down refresh dynamic effect after the refresh is complete.

You can refresh it with a button, and bindtap can request the logic layer directly.

Let's talk about the event, which is the way to communicate from the view layer to the logical layer. The event is bound to the dom, and when triggered, it goes back to the logical layer of the response. These are the most basic.

But the events are bindtap and catchtap. So what's the difference between the two? One is bubbling and the other is not bubbling. Then what does it mean to be bubbly or not?

Outer view middle view inner view

After testing, clicking inner view will trigger the events of inner view and middle view, while clicking middler view will only trigger its events, because the reloading will be blocked by outer view.

For debugging here, add a page to pages in app.json, and then you can jump to it with the following code.

Wx.navigateTo ({url:'.. / demo/demo',})

In Mini Program, local storage is also supported. For example, api wx.setStorage () and wx. SetStorageSync ().

In addition, it does not support jquery like Vue, that is, it cannot pretend to be forced. In addition, I focus on adaptation. WeChat Mini Programs supports that rpx; can achieve self-adaptation. I'm so happy about this.

For the sake of security, it does not know how to jump to the external network. This may require an application (money, you know. )

Question: I can't get the value in input because I can't operate dom, this is for a reason, because WeChat Mini Programs can't determine dom, because there is an intermediate compilation, which is a little different from vue. It can be done like this.

Solution: Wechat provides multiple events for the component of input, and it seems that only these events can be used to obtain the value of a single input.

According to these form events, we can get the value inside and then change the value in data to achieve this effect.

This is the end of the article on "how C # programmers learn WeChat Mini Programs". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how C # programmers learn WeChat Mini Programs". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.