微信小程序开发快速上手

由于学生工作需要,我最近在一些工具书的参考帮助下尝试进行了微信小程序的开发,本文主要内容为我本人在近期微信小程序开发的过程中,关于指定类型的微信小程序开发的一点心得体会。

1.0基础知识

微信小程序采用JavaScript语言进行开发,可以理解为基于ECMAScript的一种实现,即一种标准化的脚本程序设计语言,因此在微信小程序的开发上,可以直接按照ES6标准语法进行学习和设计。(可以在设置中勾选ES6转ES5以便微信小程序在一些版本较低的老型号手机上能够正常使用)
首先开始一个标准的helloworld代码

var name = 'Hello world!'
console.log (name)

1.1 ES变量

作为一种比较简单的脚本语言,ES中的变量没有特定的类型,在定义这些变量时常常只使用var运算符进行定义,可以将这些变量初始化为任意值。
代码示例-定义并输出变量

var color = "red";
var num = 25;
var visible = true;
console.log("color:",color)
console.log("num:",num)
console.log("visible:",visible)

上述代码的输出结果为:

color:red
num:25
visible:true

在ES中,每行代码末尾的分号并不是必须的,若不存在分号,ES就将折行代码的结尾作为该语句的结尾
在ES中,还存在let和const两种声明变量的方式,其中let语句常用于在代码块中声明的局部变量,const命令则会声明不能改变值的变量。
let命令和const命令都会造成一个不能使用变量的暂时性“死区”:在块级作用域中,在let声明这个变量之前对变量的任意操作都会造成错误,即使是在更早地区域中存在有重名的全局变量;const命令在定义变量后不能对这个变量作任何的赋值操作。

var ex =123;
if (true){ex='abc';
let ex;//代码报错,原因是在块内let命令前对ex变量做修改
}

1.2 ES输出命令

在微信小程序开发过程中,常常采用一些控制台输出命令来对小程序运行中一些特定的变量作运行过程中的展示,常见的输出信息的命令如下图所示:

console.log() //输出普通信息
console.info()//输出提示性信息
console.error()//输出错误信息
console.warn()//输出警告信息
console.debug()//输出调试信息

console.log()和concole.info()的作用方法类似,会向控制台输出一个带有指向代码中语句位置的超链接;而console.error()命令则会向控制台输出一个带有警告图标的信息来表示,在实际使用过程中,console.log()命令的作用是最大的。
console.log命令也同样支持C语言中最为常用的printf格式化输出,也支持微信小程序中常用的数组和对象输出。,常用于在程序的运行过程中查看变量状态和调试程序。

var animal = 'frog',count=10;
console.log("The %s jumped over %d tall buildings",animal,count);
console.log("The",animal,"jumped over",count,"tall buildings");

执行代码,输出结果为

The frog jumped over 10 tall buildings
The frog jumped over 10 tall buildings

1.3 ES数组和对象

在ES中,数组用于在变量中存储多个值,使用数组名称[num]的方式直接访问数组中的制定变量。
下图展示的是常见的数组操作命令:

concat()//连接两个或更多地数组并返回结果
indexOf()//搜索数组中的指定元素并返回其所在的位置
lastIndexOf()//搜索数组中的指定元素并返回其最后出现的位置
pop()//删除数组的最后一个元素并返回删除的元素
push()//向数组的末尾添加一个或更多元素,并返回新的长度
shift()//删除并返回数组的第一个元素
unshift()//想数组的开头添加一个或更多的元素,并返回新的长度
splice()//从数组中添加或删除元素
toString()//将数组的全部元素转化为一个字符串并返回结果
length()//设置或返回数组元素的个数
map()//返回一个新的数组,数组中的元素为原始数组元素调用函数处理之后的值

将上述展示的命令在代码中展示即为:

var itmes = ['a','b','c'];
console.log(items.length);  //控制台输出3
items.push(d);
console.log(items); //控制台输出 Array(4)["a","b","c","d"]
var index =items.indexOf("b");
console.log(items[index]); //控制台输出 "b"
var item=items.pop();
console.log(items); //控制台输出 Array(3)["a","b","c"]
items.splice(2,1); //删除数组下表为2的元素
console.log(items); //控制台输出 Array(2)["a","b"]

其中,关于数组的操作push()和concat()之间存在一定区别,push()在遇到数组参数的时候,会将整个数组参数作为一个元素,而concat()则是将数组参数拆开,将元素逐个加入进去;在使用这些命令操作数组参数的时候,要注意对应的情况。

1.4 JSON对象访问

JSON作为一种轻量级的数据交换格式,在微信小程序和后端之间的交互都被采用。JSON格式的数据存在一定的必要格式:对象必须使用花括号{}包围,对象必须以键值对书写;键必须是字符串,值必须是有效的JSON数据类型(包括字符串、数字、对象、数组、布尔型或NULL)
访问JSON对象属性主要有以下两种方法
①直接使用a.b的格式访问指定对象
②使用方括号[]的格式来访问对象

objectName.propertyName //a.b格式
objectName["propertyName"] //[]格式

通常访问对象采用方式①,但当小程序中存在中文名称作为字段的情况下必须使用方式②的方括号访问方式。
在实际的操作过程中,常常存在有将JSON对象与字符串形式互相转化的过程。
常使用JSON.stringify()将JSON对象转换为字符串
或使用JSON.parse()将字符串转换为JSON对象

微信小程序开发快速上手相关推荐

  1. 微信小程序开发快速入门

    最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...

  2. 上传文件 微信小程序input_快速上手微信小程序UI框架

    本课程属于 微信小程序 A计划,不单独售卖,加入 A 计划可免费观看本课程及所有 微信小程序 收费课程~ 微信小程序 A计划永久有效期购买链接: http://www.sikiedu.com/clas ...

  3. 微信小程序开发uni-app-8分钟上手开发

    本篇文章uni-app微信小程序开发-8分钟上手开发 -首先到微信小程序官网登录/注册微信小程序 微信小程序官网 uni-app + 微信小程序 注册微信小程序 这里要注意: 激活邮箱之后,选择主体类 ...

  4. 小程序开发代码_快速学会微信小程序开发,无需懂代码!

    现在想要制作自己的小程序的人越来越多,但大多数都不懂任何代码知识,不知该如何制作.其实随着各种第三方开发工具的出现,无需微信小程序开发源代码,小白也能顺利生成一个自己的小程序了.下面我就跟大家说下该如 ...

  5. 微信小程序开发09 开放数据:微信生态帮助业务快速落地

    你好,我是俊鹏,从今天开始,我会用四讲的时间,从"效率.留存.体验和更新"四个角度出发,带你学习目前在微信小程序开发领域中的一些前沿技术和实践经验. 这四个角度是团队在日常工作中最 ...

  6. 如何快速开始微信小程序开发?

    如何快速开始微信小程序开发? 小游戏是微信小程序中的一种分类,如果要做一款微信小游戏,就是在微信小程序中开发. 一个微信小程序是如何开发的呢?很多人尤其程序员会对这个问题感兴趣,本文将介绍如何快速注册 ...

  7. 2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码

    2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统 产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...

  8. 微信小程序服务器新手教程,微信小程序新手教程上手开发与使用总结

    微信小程序新手教程上手开发与使用总结,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧 一.模板 WXML提供模板组件给我们使用,可以在模板定义公用的代码片段,然后在需要引用的地方进行调用. 定 ...

  9. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

最新文章

  1. Elasticsearch使用优化之拙见
  2. B - Modular Inverse
  3. git push出错 remote: Hook Error: request authorize server: curl error: Couldn't resolve host name
  4. 服务器图片(绝对地址) 客户端显示问题
  5. 【多元域除法】多项式除法电路原理及MATLAB详解
  6. 网络游戏客户端服务器通信协议,有大神懂网络游戏通信协议么
  7. 02-Swift学习笔记-元组类型
  8. 你还在因为数学对AI望而却步?看看这本秘籍吧
  9. 浏览器打开就是360导航(浏览器被360劫持)
  10. 【转载】通过搜狗站长平台提交网站域名变更后的文章地址
  11. 如何查看连接过的WiFi密码?详细教程(配图片)!
  12. tift2dcm(tiff2Dicom、tiff转dicom)
  13. 三年级计算机学打字备课,小学信息技术三年级下册《15请计算机教我学打字认识打字软件》课件.ppt...
  14. 如何用计算机弹出斗地主的声音,玩斗地主没声音电脑瞎出牌。我点的没有.怎么办?...
  15. C#中{0}表示什么意思?
  16. 微信扫码登入 改变二维码样式
  17. Power BI项目之某公司内部数据分析
  18. linux服务器安装laravel教程
  19. java项目遇到风险漏洞示例与解决方案
  20. 【指数编制系列七】价格指数编制方法

热门文章

  1. 取消Vue中格式警告
  2. 【组合逻辑电路】——显示译码器
  3. 高等代数期末考试题库及答案_《高等代数》期末闭卷考试题及答案.pdf
  4. 60行代码爬取知乎神回复,笑到停不下来
  5. 阿里云centos7安装mysql
  6. 解决Navicat:Access violation at address xxxxxxxxx in module ‘navicat.exe‘.Read of address xxxxxx
  7. MCK主机加固数据安全解决方案
  8. (Web、触屏)微信支付功能调用以及QQ回调地址配置、以及遇到的一些坑
  9. c语言武汉市出租车收费标准 3公里以内,武汉的士起步价25日起调至10元 每公里租价1.8元...
  10. php显示标题控制长度,wordpress控制文章标题长度的问题