Contents
1. Basic knowledge of JavaScript
2. Development of small programs
3. Use of Vepp framework
4. Can mobile phones also use vscode?
Let's start. As we
vs code
all know, Xiaomi Mi Band 7 is equipped with Zepp OS. The small program development language of Zepp OS is JavaScript (JS for short), and its interpreter is quick.js
//The interpreter is to convert the code you write into Zepp The code that the OS can understand, the encrypted applet is to convert the applet into the code that Zepp OS can understand in advance.
Zepp OS is a pure JavaScript environment, like node (CSS can be replaced by plug-in CSS, but it is not necessary, and the dynamic effect remains the same. It can’t be realized)
so we need to master some basic knowledge of JavaScript
1. Basic knowledge of JavaScript
1. Variables
There are two ways to declare variables, namely var and let
variables are like a box containing things, which is called
assignment The full name of var is called variable, which means variable, variable, and let means "let", so let ×××=×××
where var is a very old and old way of declaring variables, and it can be reassigned , used to declare a variable in function scope or global scope//If you don’t understand it
, let is a more modern way of declaring variables. The let statement declares a local variable in block-level scope, which can also be reassigned. There is another kind similar to variables, called constants, constants are only const, constants cannot be reassigned, and the full name of const is constant, constant, constant, in short, in the future, use let for variables, and const variables for
constants
Notice! Variable names can only start with $, letters, and underscores. If the variable is assigned in uppercase and used in lowercase, it is not the same variable, and the output is undefined. I will use
Apple Health as a demonstration here
let step = hmSensor.createSensor(hmSensor.id.STEP);Among them, the step after var is the variable name, and the one after the vs codeequal sign is to assign this variable as the obtained system step number. It
can also be written like this
let step;
step = hmSensor.createSensor(hmSensor.id.STEP);This is to declare a variable first, and then assign a value to it, but this is more troublesome, and when you forget to assign a value, the variable will be output as undefined
and when we use this variable later, we can write like this
hmUI.createWidget(hmUI.widget.TEXT, {//创建控件
x: 5,//x坐标
y: 10,//y坐标
w: 200,//宽度
h: 70,//长度
color: 0xFFF200,//文本颜色
text_size: 40,//文本大小
text: step.current//将文本输出为先前定义好的变量值，.current是当前值，仅部分更新式变量使用，其它变量请自行去掉
});//结束Of course, we can also set variables as x coordinates, y coordinates, width and length.
Refer to the Battery program variables here
:
const battery = hmSensor.createSensor(hmSensor.id.BATTERY)control
hmUI.createWidget(hmUI.widget.FILL_RECT, {
x: 20,
y: 80,
w: battery.current,
h: 50,
radius: 15,
color: 0x078707,
});Generally, if there are too many variables, you can put all of them at the beginning.
2. Comments
// are single-line comments, /* */ are multi-line comments, which can be used to temporarily seal the code or explain a certain piece of code, which can improve the readability of the code in team development. So as to improve development efficiency
3. String, Boolean value
String is the text wrapped in single and double quotes,
the Boolean value is true or false
4. Conditional statement
(1). Switch statement The
switch statement simply matches the corresponding code
switch statement according to the situation The function is generally used for the internationalization of the simple language of small programs, such as ring pipe and pixel bird have adopted this method
const language = hmSetting.getLanguage();// const 常量
switch(language){// （）是赋值的变量
case 0:// 当输出结果为0，则执行以下代码（0在官方文档里的是中文）
Battery_text = "电量";
break;
case 1:
Battery_text = "電量";
break;
case 2:
Battery_text = "Battery";
break;
default: // 当输出结果不属于以上的任何代码时执行以下代码
Battery_text = "Battery";
}This code can make the small program language easy to internationalize, we can also use if statement instead (or directly use po file)
(2). if statement
if statement is similar to switch statement, except that if statement is generally used to determine a range value, and switch can only be used to return a value
if statement also has multiple branches.
Double branch is generally if (/ conditional judgment /){/ execution statement /} else {/ conversely execution statement /}
multi-branch is generally if (/ conditional judgment / ) {/ execution statement /}} else if (/ conditional judgment /) {/ execution statement /}}
where the parentheses are filled with conditional judgment, it is recommended to use it with the operators mentioned below, if there is no operation in the conditional judgment character, it is to judge whether there is
a specific instance of this variable
if (indexcolortext == undefined) {
indexcolortext = "0x000000";
indexcolorrec = "0xFFFFFF";
} else if (indexcolortext == 1) {
indexcolortext = "0xFFFFFF";
indexcolorrec = "0x000000";
} else if (indexcolortext == 2) {
indexcolortext = "0x000000";
indexcolorrec = "0xFFFFFF";
}5. The former two of break, continue and return
can jump out of the loop
in advance. The break statement terminates the current loop, switch, and transfers the program control flow to the statement immediately after the aborted statement.
continue does not terminate the iteration of the loop, but in the while loop In the for loop, the control flow jumps back to the conditional judgment. In the for loop, the control flow jumps to the update statement. The
return statement terminates the execution of the function and returns a specified value to the function caller. Let
me give you a simple example
function getRectArea(width, height) {
if (width > 0 && height > 0) {
return width * height;
}
return 0;
}
console.log(getRectArea(3, 4));
console.log(getRectArea(-3, 4));So what do you think the output is? The
answer is 12, 0.
First, let's look at the first line. I defined a function called getRectArea, and the parameters in it are width and height. There is an if statement in this function, which is used to condition Judging that
when the width and height are greater than 0, then the returned result is width multiplied by height, otherwise it outputs 0, and there is no need to say more about the printed statement afterwards. The first one is greater than 0, so the returned result is 12, and the second -3 is less than 0, so the return result is 0
6. Operator
(1). Arithmetic operators
JavaScript arithmetic operators are nothing more than addition, subtraction, multiplication, division, remainder, self-increment, and self-decrement operators such
as
var a = 10;
var b = 2;
var c = a++;
var d = a--;
var e = ++a;
var f = --a;
var s1 = a + b;
var s2 = a - b;
var s3 = a * b;
var s4 = a / b;
console.log(c);
console.log(d);
console.log(e);
console.log(f);
console.log(s1);
console.log(s2);
console.log(s3);
console.log(s4);The first few are easy to say, but what is the difference between cd and ef?
The difference is that when running c and d, the results are 10 and 11, while e and f are 11 and 10.
Why?
Because of the self-increment or self-decrement operation It is divided into preposition and postposition. The preposition is to
write a "++ or --" in front of the variable, and the postposition is to write a "++ or --" after the variable. The
postposition is characterized by first Let the variable participate in the operation, and then perform self-increment after the operation is completed
. The preposition is a means to let the value of a self-increment once. It is to let the variable self-increment first, and then put it into the formula for calculation, so the result of this code is 11
(2). Comparison operator
== equal to
! = Not equal to
Greater than means greater than
< less than
Greater than sign plus = means greater than or equal
<=Less than or equal to
(3). Logical operator
((1)). Logical AND operator
is used to determine a range
, simply write a
let battery = hmSensor.createSensor(hmSensor.id.BATTERY);
if (battery.current => 10 &＆ battery.current <= 20) {
hmUI.showToast({text: '电量不足20%'})
}Among them, && is the logical AND operator, which can be understood as the word "and"
((2)). The use of the logical OR operator
is that there are multiple conditions and as long as one of the conditions is met,
we need to use the logical OR operator | |, don't think I made a mistake, it is two vertical lines
((3)). The logical non-operator
is one!, the purpose is to negate, that is, when the result is true, it is converted to false, and false is converted to true, if it is in an if statement or a switch statement, you need to add a parenthesis to the conditional
judgment .log() prints content console.warn() prints warning information 8. Loop (1). for loop The purpose of the for loop is to run the same code over and over again, and the value is different each time for (expression 1; Expression 2; Expression 3) { Statement } First of all, two points should be emphasized: ((1)). Expression 1, expression 2 and expression 3 are separated by semicolons; and must not be written as commas ((2)).for(expression 1; expression 2; expression 3) must not be followed by a semicolon. Many novices will make this mistake—they can’t help but add a semicolon after it. Practice
for(var i = 0;i<10;i++){
console.log(i);
}(2).The while loop
is similar to the for loop
in practice
var i = 0;
while(i<10){
console.log(i);
i++;
}It is different from the for loop only in syntax, and its function is the same as that of the for loop.
9. Array An
array can generate a variable with multiple data.
There are 4 ways to define an array.
Here I will use the most commonly used direct quantity.
var arr =
[
"first","second","third"
]The result of hmUI.showToast({text: arr})
is to generate an array with 3 elements. The name of the array is arr
or we can create an array first without putting data in it.
var arr = new Array();The number of data in the array is placed in the brackets, you can leave it blank
and then fill it with data
arr [0] = "first";
arr [1] = "second";
arr [2] = "third";
hmUI.showToast({text: arr});If we need to specify the output data, just write
hmUI.showToast({text: arr [0]})
If we want to create multiple arrays with arrays, we can write like this
const dataList = [
{ text: '九转大肠', x: 5, y: 10, w: 200, h: 70, color: 0xFFF200, text_size: 40, id: hmUI.widget.TEXT},
{ text: '老马', x: 5, y: 10, w: 200, h: 70, color: 0xFFF200, text_size: 40, id: hmUI.widget.TEXT}
]
hmUI.showToast({text: dataList.text})
10. Function
Function function is translated as function.
Function has eight elements
(1). Definition of function
A function is a set of code statements that can be called repeatedly, which can greatly reduce your code. The format of the function is as follows: function
function name ( parameter, can be left blank) {
executed code, called function body
}
as a demonstration
funtion showToast(){
hmUI.showToast({text: '函数被调用了'});
}I defined a function, the name of the function is showToast, and the parentheses behind it are used to put parameters, that is to say, if the function needs to use some data passed in from the outside, it can be passed through the parameter variable . The last is the function body, and the part expanded with curly braces is the function body of the function. Multiple JavaScript codes can be written in the function body. Of course, because this is just an example, I only wrote a basic showToast control in my function, and only a prompt will pop up. Next, we need to call the function showToast(
) ;
To call a function, you only need to write a function name and a parenthesis (which contains parameters, or you can not pass it) and then add a semicolon to call the function, and execute the function body of the function. This is the first function definition method, and there are
others two methods
var showToast = function(){
hmUI.showToast({text: '函数被调用了'});
}This is the second method of defining a function, which is different from the first method. The second method of defining a function is to define the function in the form of a variable. The name of the variable is the name of the function. That is to say, I want to To call this function, just call the name of the variable directly
. However, this method also has disadvantages. For example, if I call this variable (function) before defining this variable, an error will be reported, but the first method will not have this.
(2). Scope
In JavaScript, there are two types of scopes. The first is the global scope, and the second is the function scope. The scope means that when you want to find a certain variable, you In what scope can this variable be found. The scope of this search is the scope. Regarding the global scope, let’s look at a relatively simple example first.
var a = 10;
function test(){
console.log(a);
}Both the variable a and the test function are directly exposed outside, so they are all global scopes, and the code (function body) of the test function is the function scope, because the test function belongs to the global scope, and it also has a function scope , then in this way, there is a function scope in the global scope, and the function body can access the variables in the global scope, but not the other way around, please see the example just now
function test(){
console.log(a);
}
var a = 10;
test();If I call the test function directly, the answer must be 10. In this example, a in the function scope will first go to the function scope to find the variable a. If you can't find it, go to the global scope to find it. There is a variable a in the global scope. Then, when the function body is executed, the variable a in the global scope is accessed, but the reverse is not possible, such as this
function test(){
var a = 10;
}
console.log(a);As I said just now, variables in the global scope can be accessed in the function scope. However, it is impossible for the global scope to call variables defined in the function scope. Therefore, when scope nesting occurs, only functions can access the global, and the global cannot access functions. And scope nesting is generally global scope and function scope, or function scope and other function scope. For example, the following form is not scope nesting
if(true){
var a = 20;
}
console.log(a);The result of the code running is 20.
Although the definition of variable a is written in curly braces, JavaScript only has global scope, function scope and block-level scope. There is no function here, so it is not considered scope nesting. Here a is global scope In the domain, console.log is also in the global scope, so you can naturally
access the variables in the same global scope. variables can only be accessed in the block-level scope, and the block scope is included by { }, and the { } in the if statement and the for statement also belong to the block scope
(3). The parameter passing
parameter is the value passed in when the function is called. That is to say, when we define the parameters, we don't know what kind of value will be passed in the calling process.
function add(a,b,c){
let sum = a + b + c;
hmUI.showToast({text: sum})
}
add(1,2,3);The result of the code running is 6.
This is the simplest example of parameter passing. The definition of the function name should be easy to understand. In this example, the add function is for addition. Three parameters are passed in, namely 1, 2, and 3. These three parameters correspond to the parentheses in the add function, that is, the three variables a, b, and c in the parameter list.
In the example just now, if you To call the add function, you must pass in three parameters, just like the following code
add(1,2,3);
the function call is to add a pair of parentheses to the right of the function name, so that the function will be executed The code body, which is the following part
function add (a,b,c){
var sum = a + b + c;
hmUI.showToast({text: sum})
}The code body of a function is generally expanded with curly braces. After each sentence is written, a semicolon is required. Now let’s take a look at what happened in the function body of this function. The first line is
var sum = a + b + c;
sum is a newly defined variable. This variable is defined in the function scope. There is no way for the outer global scope to directly access the sum variable in the function scope. Therefore, this sum variable can only be accessed by the function body of this function. It is called a local variable, and then it is added and assigned. After adding the three variables a, b, and c to get a total, then the total The amount is assigned to the local variable sum. The following is a showToast control, which is to prompt the sum variable to pop up.
What should we do if we call the function and only pass one parameter?
For this problem, we can split it out and see it separately. For example, I defined a function and set a parameter, but when I passed the parameter, none of the parameters were passed.
function fun(a){
hmUI.showToast({text: a})
}This is a simple function. The fun function sets a parameter called a. This a has not yet explained what it is. I wrote a showToast control in the function body of this function. Next, I want to call this function without Write parameters, like this
fun();
this is a very weird example, because the fun function requires a parameter called a to be filled in, but no parameters are passed in when calling the function, which is not allowed, but when this What if this situation really happened? Try it and you will know that
the output result is undefined
Yes, the result is undefined. In fact, this example can be subdivided again. There is a parameter a in the function just now, then this parameter belongs to the scope of the function, which is equivalent to this
function fun(){
var a;
hmUI.showToast({text: a});
}The parameters of a function can be simply regarded as being in the function body, that is, the first line inside defines a variable. Because we have not assigned a value to this variable, this local variable is undefined. Any variable is undefined before it is assigned a value. The parameters of these functions can be understood as a kind of prepared variable. Next, let’s talk about the normal situation. For example, I call the fun function and pass a parameter of 18. The process of passing parameters is equivalent to the process of assigning values to prepared variables. If no parameters are passed, the prepared variables are naturally still undefined. Go back to the example at the beginning and see if only one parameter is passed
function add(a,b,c){
var sum = a + b + c;
console.log(sum);
}
add(1);In this case, the value of a is 1, and the values of b and c are undefined, so what is the sum of the number 1 and 2 undefined? Really interesting question. The result is NaN, which means cannot be calculated. Yes, if you really do that, then it doesn't make any sense. At least in this function, such an approach is meaningless.
So what happens if we pass an extra parameter?
For this problem, it can actually be disassembled separately. For example, I define a function fun, but there are no parameters. If I deliberately add a parameter to the fun function when calling it, what will happen? like this
function fun(){
}
fun(10);As you can imagine, nothing will happen naturally. Going back to the example just now, even if you forcibly add the fourth parameter, it will not have any effect on the result
(4). Use of closure
:
((1)). The behavior of the child function using the parent function variable
directly says You may not understand, let's give an example
function a(){
let leo = 1;
function b(){
hmUI.showToast({text: leo});
};
b();
}It can be understood that function a is a big circle, function b is a small circle, function a wraps function b, function a has a leo variable, and function b accesses the variable of a ((2)). Extending the variable of the called parent
function First
, if a variable in JavaScript is not used later, it will be recycled. Taking the above example as an example, because function b calls the leo variable in function a, the life cycle of the variable in function a can be extended. That is, the life cycle of the parent function
((3)): Expanding the space of the parent function
Simply put, the code of the parent function has increased, because there is a sub-function (5) in it. Many times when
self-executing functions , we only want to execute one function
, but it doesn't matter what the name of this function is. So in this case, you can consider using a self-executing function. The format of a self-executing function is as follows
Syntax: (Define a function without a name)();
Next, give a specific example to see how to define a self-executing function
(
function(){
console.log(123);
}
)();This is a simple self-executing function. The so-called self-executing function, as the name implies, is a function that is executed immediately after definition. It generally has no name. It is also because the self-executing function has no name, so although it will be executed immediately, it will only be executed once.
Self-executing functions can generally be used in conjunction with closures. For example
function test (){
var a = 0;
return function (increment){
a = a + increment;
hmUI.showToast({text: a})
}
}In this closure example, I actually want to get the inner function inside the test function, so I don’t really need to know the name of the outer function, it can be called any name, and it doesn’t even need to have a name, so I want to use Self-executing function
(6).this
first look at the code
function hello(){
console.log(this);
}I defined a function hello, which has only one print statement, which prints out the this object. this is a keyword in JavaScript, which means that this always points to the caller of the current function. This sentence is an iron law about this. First of all, the first information revealed by this sentence is that this only appears in function. The second information is who called this function, this is who
(8). The new function
said earlier that JavaScript is divided into global scope and function scope. Anything defined in the global scope belongs to window object. In other words, the hello function is also the hello function of the window object. An object can call its properties in two ways. The first way is to point, such as
window.hello();
the second way is to use square brackets, that is, object [property name], the property name can be a string or a variable, for example, I write like this everything is possible
window['hello']();
var p = 'hello';
window[p]();As I said before, this always points to the caller of the current function. Then, we call the hello function, in fact, the window object calls the hello function. That being the case, this in the hello function naturally points to the window object. Therefore, the window is printed after the hello function is called. Ok, back to the new keyword issue, what happens if I use new when calling a function
function hello(){
hmUI.showToast({text: this})
new hello();That is, a new object is generated inside the function, and this points to this new object, and then the function returns this new object by default
function hello(){
hmUI.showToast({text: this})
}
new hello();
var newObject = new hello();
console.log(newObject);The result of this is that newObject is the this inside the function, that is, the newly generated object inside the function.
This function also has another name called a constructor. I can build an object template through the constructor
. The so-called object template refers to Design a kind of object in the form of a function. To put it simply, foods such as apples, bananas, and chestnuts are all foods, so I can design an object template to describe some common characteristics of foods. For example, food has attributes such as name, taste, color, etc., then I can use this keyword to design these attributes in the function
function Fruit(name,smell,color){
this.name = name;
this.smell = smell;
this.color = color;
}I defined a function Fruit. Generally speaking, if this is a constructor, the first letter needs to be capitalized
because the function will generate a new object from the inside after using the new keyword, and this points to this object. I can directly set properties for the object that will be generated in the future in the function, which can also be understood as a feature. In this example, I designed a fruit constructor, and with the new keyword, many kinds of fruit objects will be generated. I can also give the name attribute, edible attribute and effect attribute of the food object in this constructor. Fruit is a function. Since it is a function, it can naturally pass parameters, so I simply pass these food characteristics as parameters.
var apple = new Fruit('shit', 'eat three catties of shit a day', 'the more you eat, the more awesome you are');
In addition to creating an object with a function, you can also directly create a custom object
var apple2 ={
name:"屎",
today:"一天吃三斤屎",
niuboyi:"越吃越牛逼"
}This is a way to create an object, using curly braces to directly define an object. The attributes and attribute values in the object are in the form of key-value pairs, with colons in them, and different key-value pairs can only be separated by commas. A key-value pair, where the key is the name of the attribute and the value is the value of the attribute. Keys may or may not be quoted. The value is not only a string, it can be a number, it can also be a string, or even a function or another object. It is
beneficial to define an object with a constructor method. For example, if I need two apples, if I use the constructor, I just call the new function twice, and I can get two apples very conveniently. The way to use curly braces has to be written twice
var apple1 = new Fruit('大苹果','香甜可口','红色');
var apple2 = new Fruit('大苹果','香甜可口','红色');
var apple3 = {
name:"苹果",
smel1:"甜的",
color:"红色"
}
var apple4 = {
name:"苹果”,
smell:"甜的”,
color:"红色”
}You might say, this is too TM troublesome, directly
var apple3 = {
name:"苹果",
smel1:"甜的",
color:"红色"
}
var apple4 = apple3;Isn’t
that all right?
Bubububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububobububububububububububububububububububububububububububububububububububububububububububububobubububububububububobubububububububububububububobububububububububububububobububububububububobubububububububobububububububububububububobubububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububububu properties of
var apple3 = {
name:"苹果",
smel1:"甜的",
color:"红色",
isEat:false
}Then make the variable apple4 equal to apple3, modify the eat attribute of apple4, and change the state of not being eaten to being eaten. Then, check to see if apple3 has been changed along with it.
var apple3 = {
name:"苹果",
smel1:"甜的",
color:"红色",
isEat:false
}
var apple4 = apple3;
apple4.isEat = true;
console.log(apple3);The output result is isEat:true
8. Callback function
The callback function is to pass the definition of a function as a parameter to another function. For example,
under normal circumstances, a function parameter can be a number or a string. No problem. But JavaScript provides a powerful feature: a function can also be used as a parameter of another function. For example, I now have a function of 'eating', since it is a function of 'eating', I have to consider what to eat, how to eat, and what condiments to add
function eat(food,howToEat,tiaoliao){
hmUI.showToast({text:tiaoliao + ',' + howToEat + "吃" + food});
}This is a 'eat' function, and I pass in the food, how to eat it, and condiments as parameters. Then, when I want to call this 'eat' function, it may look like
eat('mutton skewers','smiling','sprinkle a pinch of cumin');
the result of the code operation is: sprinkle a pinch Cumin, grinning and eating kebabs.
Doing this is very good, but what if I were to add new conditions to this function? I am going to modify the parameter list of the function and the code body of the function. If the change is relatively large, it will be very troublesome. So shouldn't I decide how to eat when I actually eat? Therefore, food variables can still be passed as parameters, because what to eat may be pre-thought out, but how to eat is difficult to pre-think, and what condiments to add is very random. So, can I pass the eating method as a parameter into the eat method? At that time, when you really need to think about how to eat, wouldn't it be good to directly call this function that has been used as a parameter?
function eat (food,callback){
callback(food);
}You may think this code is a bit strange,
don't worry, let me take my time. First of all, callback is that function. Since it is a function, we all know that a function can be executed by typing a parenthesis. Then in this eat function, the callback is executed directly, and another food parameter is passed into the callback. It means that how to eat is realized by temporarily writing a new function when you call the eat function!
eat('羊肉串',function(food){
hmUI.showToast({"笑嘻嘻的,撒上一撮孜然,开心地吃" + food});
}This function I want it to enter the eat function to execute. At the same time, when I wrote this anonymous function, I also designed the parameter food, which is the food to be eaten. This is the common sense of JavaScript. After all ,
most of the time, just read the official documentation . Download my networking applet template\helloworld template, open it with mt manager on the mobile phone, and open it with VSCode (Visual Studio Code) after decompression on the computer. At a glance , we will see two files and six folders (the last four of the helloworld template are missing) assets : Store some files needed by the applet, such as icon pictures, e-book text, picture controls, etc. page (different applets display differently): store code files app.js: applet logic app.json: applet information app-side: Networking applets will have setting: applets that use the setting application will have utils: shared : shared First, we enter app.json to configure applet information
{
"configVersion": "v2",
"app": {
"appIdType": 0,
"appType": "app",
"version": {
"code": 1,//第几个版本
"name": "1.0.0"//小程序版本号
},
"appId": 100001,//appid，来保证小程序不会被覆盖，类似安卓包名
"appName": "小程序",//小程序名字
"icon": "icon.png",//小程序图标
"vender": "bandbbs",//开发者名字
"description": "helloworld"//小程序简介
},
"permissions": ["gps"],//小程序权限
"runtime": {
"apiVersion": {
"compatible": "1.0.0",
"target": "1.0.1",
"minVersion": "1.0.0"
}
},
"i18n": {
"en-US": {
"name": "helloworld"//多语言
}
},
"defaultLanguage": "en-US",//默认语言
"debug": false,//调试选项
"module": {
"page": {
"pages": [
"page/192x490_s_l66/index.page"//默认打开路径
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
},
"platforms": [
{
"name": "l66",
"deviceSource": 260
},
{
"name": "l66w",
"deviceSource": 261
},
{
"name": "l66_1",
"deviceSource": 262
},
{
"name": "l66w_2",
"deviceSource": 263
},
{
"name": "l66_3",
"deviceSource": 264
},
{
"name": "l66_4",
"deviceSource": 265
},
{
"name": "l66_5",
"deviceSource": 266
}
],
"designWidth": 192,
"packageInfo": {
"mode": "production",
"timeStamp": 1648534836,
"expiredTime": 172800,
"zpm": "2.1.49"
}
}Anyway, just look at it and change it.//After
changing the appld of my networked applet template, I need to change appld in app.js
and then enter the index.page of 192x490_s_l66 in the page
, and then you can write code.
Notes on applet development:
1. The operating system of Xiaomi Mi Band 7 is Zepp OS1.0, which cannot use the 2.0 API
//and it is impossible to upgrade to 2.0. The official explanation is that upgrading Mi Band 7 to 2.0 requires a comprehensive evaluation of device performance and user experience, which cannot be achieved in the short term
3. Does not support the use of new Function to create functions (can be solved by using the Vepp framework)
except new Function('return this')
4. ECMAScript of Zepp OS does not support the following features:
Promise
Generator function
Timer
5. Mi Band 7 does not support asynchronous, For example, you can’t load the interface in advance before entering.
Here is a summary of the tools used when opening.
Computer and mobile phones.
Official document: https://docs.zepp.com/zh-cn/docs/1.0/reference/app-json/Mini
program template: https://www.bandbbs.cn/threads/4250/
Small program dial template: https://www.bandbbs.cn/threads/4007/
Modify image size: https://www.gaitubao.com/
Image conversion: https://watchface-web-editor.rth1.one/
Jump to the official application API: https://www.bandbbs.cn/threads/4859/page-2#post-221632
MDN document (must learn JavaScript prepared): https://developer.mozilla.org/zmake/
computer-specific
image conversion: https://www.bandbbs.cn/threads/3953/ or https://melianmiko.ru/zmake/
Zeus development: https://www.bandbbs.cn/threads/5237/
Vepp framework: https://www.bandbbs.cn/threads/5754/ (see below for usage)
Simulator: https://melianmiko.ru/zepp_player/ (Strongly recommended on the computer side, no configuration required)
Commonly used API
controls
text
hmUI.createWidget(hmUI.widget.TEXT, {//创建控件
x: 5,//x坐标
y: 10,//y坐标
w: 200,//宽度
h: 70,//长度
color: 0xFFF200,//文本颜色
text_size: 40,//文本大小
text: "hhh"
});//结束picture
hmUI.createWidget(hmUI.widget.IMG, {
x: 78,
y: 421,
src: "help.png"
})Jump to the page, follow the non-button control
.addEventListener(hmUI.event.CLICK_UP, function (c) {
hmApp.gotoPage({
url: "page/192x490_s_l66/index.page2",
param: "..."
})
});picture frame
hmUI.createWidget(hmUI.widget.IMG_ANIM, {
x: 0,
y: 189,
anim_path: "images/Mars", //目录
anim_prefix: "bg",//前缀
anim_ext: "png",//后缀
anim_fps: 3,//帧率
anim_size: 313,//数量
repeat_count: 5,
anim_repeat: false,
display_on_restart: true,
});fill rectangle
hmUI.createWidget(hmUI.widget.FILL_RECT, {
x: 125,
y: 125,
w: 230,
h: 150,
radius: 20,//圆角
color: 0xfc6950//颜色，十六进制
})stroked rectangle
hmUI.createWidget(hmUI.widget.STROKE_RECT, {
x: 125,
y: 125,
w: 230,
h: 150,
radius: 20,
line_width: 4,//线宽
color: 0xfc6950
})round
hmUI.createWidget(hmUI.widget.CIRCLE, {
center_x: 240,//圆心x坐标
center_y: 240,//圆心y坐标
radius: 120,//半径
color: 0xfc6950,
alpha: 200//透明度
})button
hmUI.createWidget(hmUI.widget.BUTTON, {
x: 40,
y: 240,
w: 400,
h: 100,
radius: 12,//圆角
normal_color: 0xfc6950,//一般按钮色
press_color: 0xfeb4a8,//按压按钮色
text: 'Hello',//文字
click_func: () => {//回调，触发事件
hmApp.gotoPage({url: "page/192x490_s_l66/index.page4",param: "..."});//跳转页面
}
})hint
hmUI.showToast({
text: 'Zepp'//文本内容
})Miscellaneous
jump page
hmApp.gotoPage({url: "page/192x490_s_l66/index.page4",param: "..."});Easy Global Variables
hmFS.SysProSetInt('fps');
let fps = hmFS.SysProGetInt('fps');Simple theme
var menusittuughhsdgbfjhgwaqeurdfgaiehriuaq = menufou.createWidget(hmUI.widget.BUTTON, {
x: 0,
y: 5,
w: 192,
h: 45,
radius: 10,
color: 0xffffff,
text_size: 25,
text: "黑配白",
click_func: () => {
hmFS.SysProSetInt("indexcolor", 1);
}
})
var menugale = menufou.createWidget(hmUI.widget.BUTTON, {
x: 0,
y: 50,
w: 192,
h: 45,
radius: 10,
color: 0xffffff,
text_size: 25,
text: "白配黑",
click_func: () => {
hmFS.SysProSetInt("indexcolor", 2);
}
})transfer:
var indexcolortext = hmFS.SysProGetInt("indexcolor");
var indexcolorrec;
if(indexcolortext == undefined){
indexcolortext="0xffffff"
indexcolorrec="0x000000"
}else if(indexcolortext == 1){
indexcolortext="0xffffff"
indexcolorrec="0x000000"
}else if(indexcolortext == 2){
indexcolortext="0x000000"
indexcolorrec="0xffffff"
}multi-language
const language = hmSetting.getLanguage();
switch(language){
case 0:
Battery_text = "电量";
case 1:
Battery_text = "電量";
break;
case 2:
Battery_text = "Battery";
break;
default:
Battery_text = "Battery";
}hmUI.createWidget(hmUI.widget.TEXT, {
x: 5,//x coordinate
y: 10,//y coordinate
w: 200,//width
h: 70,//length
color: 0xFFF200,//text color
text_size : 40,//Text size
text: Battery_text
});//End
3. Use of the Vepp framework
Then let’s talk about the functions of Vepp and how to use it. The
official explanation is that the core function of Vepp is declarative rendering, and the subscription update
first removes In addition to the declarative style, there is another kind called the imperative style. The difference between the two is
the imperative style: what to do where and how to do it.
The declarative style: what
to do where.
Imperative:
var arr=[2,4,5,6]
var arr2=[]
for(var i=0;i<arr.length;i++){
arr2.push(arr*2)
}Declarative:
var arr=[2,4,5,6]
var arr2=arr.map(item=>item*2)
console.log(arr2)In this way, a lot of code is written less. As for the subscription update, it means to let the bracelet register in the cloud and automatically receive the latest resources. In
addition, Vepp bypasses the new Functuon, and can be used on the official basis to build a control
system Tutorial
Open https://github.com/coreybutler/nvm-windows/releases on the computer to download and install
Press and hold Win+R on the computer at the same time, enter cmd, enter npm install vepp
After the download is complete, return to the desktop
Right click, create a new text document
and change the suffix name For .js, open it with Vscode
and look at the official introduction map of Vepp.
The first line is import Vepp from 'vepp'.
In fact, it uses the downloaded Vepp framework.
Insert this code into the top of the js file
and then write the last two lines. Good applet logic (no need for helloword template, just copy my networked applet template directly)
The fourth line is a let variable, which is also created with VML. This line can be copied and pasted directly.
Then ui is the property of the control , you can refer to the official modification
and then data here is also some information about configuring this control.
This code sums up Vepp to create a new page. This page will have a text control named mytext. This text control can be clicked and then trigger the myfunc function. , so that the value of mytext can be printed out
Try it out
#BUTTON x: 0, y: 6, w: 2, h: 1, color: 0x49406d, normal_color: 0xc9bdff, press_color: 0xeae5ff, radius: 12, text: "It's on purpose", click_func: () => hmUI. showToast({text: 'Have you tasted it'})
I created a button, isn't it very simple, using VML to create controls is much less than the official code
4. Mobile phones can also use vscode?
Do you think that the mobile development tool mt manager is too lacking in functions? There is not even a code error correction function, and there are a lot of powerful vscode on the computer side, so is there a way for us to use vscode on the mobile phone? The answer is
yes
!
There are not only the official web version of vscode but also the third-party transplanted vscode. Let’s take a look together
. The URL is vscode.dev, remember! Be sure to use edge or chrome browser to open, otherwise the screen will be blank. However,
this web version is convenient, but ah, it does not support plug-ins (maybe no plug-ins are needed for mobile phones)
2. Although Code FA
has many third-party vscode, but Code FA is the smoothest for me.
Specific use
Download and install https://www.coolapk.com/apk/com.nightmare.code
Download https://www.123pan.com/s/YOtKVv-BXN0A
Unzip the files in the second link to the /storage/emulated/0/ directory
Open Code FA, change the version number to 4.6.1
If the screen is blank after loading, use a browser with an independent kernel to open the URL of the blank screen ( I also forgot)
Find the two plugins downloaded, select and wait for the installation
No more