


After nearly a year of waiting, the WeChat mini program has finally been officially released. For developer friends, you can apply to create your own mini program in the future. So how to apply for WeChat mini program? Below, the editor of "Computer Pepsi Network" will share in detail a practical development tutorial for making a WeChat applet from scratch. I hope that the steps will be helpful to early developers.
Preparation before applying for WeChat Mini Program:
First, you need to register a Mini Program account. You need to register with an email address that has not been registered for a public account. The registration process requires a lot of certifications, which is quite cumbersome. If you are just testing the waters for the time being and have no plans to publish, you only need to complete the basic information and there is no need to complete WeChat authentication.
After that, you can log in with the registered account on the public platform.
Then, click Settings in the list on the left side of the main page, then select Development Settings on the settings page, and you can see the AppID. The AppID can be used to register in the development tool and use the advanced features of the development tool. You can download development tools from the official website.
Start the project:
Open the developer tools, select the mini program option, and then click the "Add Project" button directly. At this step, we can fill in the AppID we just used when registering.
If the file in the project directory is an empty folder, you will be prompted whether to create a quick start project.
Select "Yes", the developer tools will help us generate a simple Demo in the development directory.
This Demo has the general framework of a complete small program.
1. Framework
Let’s first take a look at the directories included in the officially provided Demo:
app.js: applet logic, life cycle, and global variables.
app.json: Mini program public settings, navigation bar color, etc. cannot be commented.
app.wxss: Mini program public style, similar to CSS.
The mini program page structure is similar to this:
Each mini program page is composed of four different suffix files with the same name in the same path, such as: index.js, index.wxml, index .wxss, index.json
The path and page file name of each page in the WeChat applet need to be written in the pages of app.json, and the first page in the pages array is the applet Home page.
These four files can be divided into three parts according to their functions:
Configuration: json file
Logical layer: js file
View layer: wxss. wxml file
On iOS, the logic code of the applet runs in JavaScriptCore, while on Android, this task is completed by the X5 kernel.
On the development tools, the JavaScript code of the mini program runs in NW.js (Chrome kernel). This also leads to differences between the effects on development tools and the actual effects.
2. Components
WeChat provides many components, which are mainly divided into eight types:
These include commonly used components such as view, scroll-view, button, and form. The component also provides a map. The mapcanvas
component mainly belongs to the view layer and uses WXML for structural layout, similar to HTML. Styles are defined and modified through WXSS, and its syntax and usage are similar to CSS.
Component usage syntax example:
3. API
Network
Media
Data
Location
Device
Interface
Development interface
The network request interface contains ordinary HTTPS requests, Supports uploading, downloading, and Socket, which basically meets the network needs we need in development.
These APIs belong to the logic layer and are written in JS logic files.
Usage example:
wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res. speed var accuracy = res.accuracy } })
You can go to the official documentation – API to see how to use other APIs.
Compile and run
1. Simulator debugging
We can use the simulator to view the effect of the mini program in the developer tools provided by WeChat.
We mentioned before that the underlying operating system of the mini program is different, which also results in the effect on the simulator being somewhat different from that on the mobile phone.
2. Real device debugging
In the option bar on the left, select the item, and then click Preview. A QR code will be generated. Scan it with the administrator’s WeChat account and you can debug it on the real machine. See the actual effect on the machine.
Actual combat: running applet
Real machine running screenshots (running on iPhone 7, WeChat version: 6.3.30):
First implement a timer for timing, and pass wx.getLocation obtains the coordinates, stores the obtained coordinates in an array, obtains the mileage through the coordinates at regular intervals, accumulates the total mileage, and also connects the coordinate points. Problems:
Because there is currently no way to draw a connecting line on the map, I have adopted the method of pasting a small red dot on the map to show the approximate running path, which is relatively rough;
Although the Mars coordinate GCJ02 type in the API is used, the obtained coordinates are similar to the international coordinates, and there are still deviations.
I have put all the code on GitHub. You can download it to take a look or star it first. I will make some optimization updates in the future. Now it is just a learning demo, everyone communicates and learns, and the actual application needs more optimization.
For more articles on how to apply for a WeChat mini program and how to make a WeChat mini program from scratch, please pay attention to the PHP Chinese website!

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Atom editor mac version download
The most popular open source editor

SublimeText3 Linux new version
SublimeText3 Linux latest version
