Uni-app experience-WeChat applet

As a front-end developer, knowing how to develop WeChat applets is now an indispensable skill, but it takes a lot of time to learn again, although the native WeChat applets are different from the traditional H5, JS, and CSS It is not very big, but it is not in accordance with our usual development steps. It is bound to step on the pit and affect the development progress. Therefore, in my spare time, I choose uni-app to study.

uni-app introduction:

uni-app is a framework that uses Vue.js to develop all front-end applications. Developers write a set of codes that can be published to iOS, Android, H5, and various small programs (WeChat/Alipay/Baidu/Toutiao/QQ/Dingding ) And other platforms. Even if it is not cross-terminal, uni-app is also a better small program development framework. For details, see the evaluation. DCloud has 3.7 million developer users, and its uni-app has 50,000+ cases, 800 plug-ins, 50+ WeChat/qq groups, and is built-in by Ali applet tools (see details), developers can choose with confidence .

This is the introduction of uni-app's official website: https://uniapp.dcloud.io/ Friends who are interested can go and study it carefully. I won’t say much here. In short, a set of codes can be used by the compiler. It is used on a platform, and the highlight is that it uses Vue.js to develop all front-end application frameworks, which is perfectly connected to my technology stack (can I directly develop uni-app?) In fact, it is not, after all When compiling vue into a small program, you must consider whether there are all the APIs currently used in the small program.

For example, I recently wrote a small sports demo imitating keep. At the end of a round of exercise, I want to use audio for automatic music playback. When I finish writing, perform a compilation test. The small program reports an error: audio play The method is undefined, so I went to find the documentation of the applet.

Insert picture description here
Taking this as an example, I want to say that although the technology stack basically corresponds, there are still big and small pits that we need to step on, but it is much more convenient than learning WeChat applets from scratch. After all, stepping on a pit is also an accumulation of one's own knowledge!

Let's enter the topic, the practical application of the WeChat applet terminal of uni-app:

The most common request method:

// 默认方式
uni.request({
    url: 'https://www.example.com/request',
    success: (res) => {
        console.log(res.data);
    }
});

// Promise
uni.request({
        url: 'https://www.example.com/request'
    })
    .then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
        var [error, res]  = data;
        console.log(res.data);
    })

// Await
function async request () {
    var [error, res] = await uni.request({
        url: 'https://www.example.com/request'
    });
    console.log(res.data);
}

Common configuration: the same writing method in Page.js and applet, it should be noted that the icon needs to be less than 40kb

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
    }, {
        "path": "pages/component/view/index",
        "style": {
            "navigationBarTitleText": "view"
        }
    }],
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
            "name": "test", //模式名称
            "path": "pages/component/view/index" //启动页面，必选
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        }
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "list": [{
            "pagePath": "pages/component/index",
            "iconPath": "static/image/icon_component.png",
            "selectedIconPath": "static/image/icon_component_HL.png",
            "text": "组件"
        }, {
            "pagePath": "pages/API/index",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }],
        "midButton": {
            "width": "80px",
            "height": "50px",
            "text": "文字",
            "iconPath": "static/image/midButton_iconPath.png",
            "iconWidth": "24px",
            "backgroundImage": "static/image/midButton_backgroundImage.png"
        }
    }
}

Configure in manifest.js, mainly AppleID applet

Insert picture description here

I won’t go into details about how to make the compiler run to the WeChat applet, just follow this one: https://jingyan.baidu.com/article/f0e83a2558580022e591018b.html

to sum up:

Basically, as long as there is a vue technology stack, a simple demo development can be carried out by looking at the uni-app documentation, and the process of stepping on the pit is regarded as the accumulation of growth and experience. ~