css计算函数 scalc 微信小程序_今日干货 ！ 微信小程序开发入门级

一、APP使用现状

1、一个月用一次APP，也要下载安装

2、广告弹窗

3、软件全家桶(下载一个APP，附属APP较多)

4、“保活”疯狂耗电(看似关闭，实际后台执行)

5、恶意App

---

二、APP开发现状

1、开发成本高，两套平台(Android、IOS)，不同机器还要适配

2、不同应用市场的困难

3、H5性能差

4、React Native

5、微信小程序

---

三、微信小程序的战略意义

什么是“微信小程序”？

微信小程序是运行在微信中的App，不用单独下载安装，使用起来像公众号一样。又比公众号好：可以调用手机的功能，能做网页做不了的事情；是本地程序，加载快，运行快。

“微信小程序”使用起来的优点：免安装；被腾讯“管控”，更老实；

“微信小程序”开发的优点：开发一次即可，Android、IOS双平台运行；

“微信小程序”的前景：众望所归，人民的期望；Android、IOS开发会受到一定的影响。

---

四、微信小程序的技术分析

1、微信小程序的开发技术是什么？

微信小程序是客户端开发技术，和服务器通讯采用Http、WebSocket等方式；使用JavaScript作为开发语言，使用类似Html的界面技术和类似Html5的API，是腾讯自己开发的技术。建立在大家掌握json、http通讯的基础上。

2、微信小程序是网页开发吗？是Html5吗？

不支持javascript dom，也就是document.getElementById、alert等，也就不支持JQuery等。只能说“类似”HTML、JS、CSS。学过HTML、JS、CSS有助于学习，如鹏训练营的课程之前讲过这些，所以这里就建立在大家懂这些的基础上去讲。

3、微信小程序技术特点：迭代比较快，新功能、开发工具一直在升级，也可能会引入bug。getCurrentPage、 getCurrentPages。

4、微信小程序使用什么开发工具？

腾讯自己搞的开发工具，现在也有了EgretWing等第三方开发工具；

5、学微信小程序开发需要学什么？前后端。

---

五、开发环境搭建

下载地址：

运行后如果提示“更新成功”，又没有地方可以关，就在任务栏关闭，然后重新运行；

第一次运行，先使用微信扫码；

开发工具界面介绍：【编辑】；【调试】，类似浏览器的F12；点击【编译】来编译并且运行项目；

项目结构说明；

修改代码后一定要先ctrl+s；

这是模拟器的运行，是用网页模拟出来的，很真机还是有差别；

修改后模拟器中立即重新加载；

调试面板的使用：在调试模式下进入；console中看编译、运行错误，代码中用console.log等输出的也显示在这里；可以在Source下设置断点，注意source中看到的是编译后的js；Network中看网络通讯报文；Storage看本地存储；App_Data看应用数据；Wxml中可以进行页面结构的查看。

---

六、初始项目结构讲解

1、文件类型：

wxss是类似于css的样式文件

json是配置文件，和获取服务器端json数据没关系；

js文件是逻辑代码，不支持document等普通浏览器对象，因此也无法使用JQuery等，可以使用标准的js语法，支持ES6部分语法；

wxml是界面文件；借鉴了HTML的一些思想，但是不支持任何HTML元素。

2、文件关系

wxml、wxss、js文件名相同的成为“一组界面”；wxml描绘界面结构、wxss是页面的样式、js是逻辑代码；

严格的MVC模式：js中不能直接操作wxml中的控件，js和wxml的交互(给控件属性赋值、把控件的值获取到)都是通过data和表单来进行。

3、app.js是全局脚本，可以处理应用的初始化和生命周期控制；app.json是全局的配置，pages中是app中所有的页面，所有页面都在这里注册(不用后缀)，第一个页面是起始页；app.wxss是全局的样式文件，可以被子页面使用。

七、实现加法计算器

pages下新建一个目录(也可以多个页面放到一个目录下，但是建议一个页面一个目录)test1，再建test1.js和test1.wxml(文件名不一定和目录名一样，但是建议一样；但是js、wxml、wxss、json的文件名必须一致)

---

八、美化加法计算器

---

九、初始项目代码讲解：Index

index、logs目录都是官方的例子，不是必须的，可以删掉的，注意保持app.json中页面注册的同步。

是一个横向或者纵向布局子元素的容器；

关于代码风格：官方的例子是没有行结尾的分号；支持let、const等ES6中的严格模式，官方例子还是用var；

index解读：data是js传递数据给View的Model，可以在Page函数中通过data属性赋值初始值，除了在Page中给data初值外，其他地方不要直接给data赋值，而是通过页面的对象setData({motto:“inlett"})方法这样进行“部分赋值”，setData后界面中就会立即发生变化，setData可以给界面中几乎所有控件的所有属性赋值；使用"page.data.key名字"这种方式取值；

处理点击事件使用bindtap事件；重定向wx.navigateTo({url:'../logs/logs'})；onLoad是页面加载的事件；

需要获取用户输入内容的时候用formsubmit，普通的点击事件处理用bindtap；

和js中的this作用域一样的，在所有Page的事件处理方法中的this都是Page对象，但是在其他function里调用的就不一定了，因此通常的做法是var page = this这样处理。

十、初始项目代码讲解：logs

var util =require('../../utils/util.js')的方式可以引入外部的js文件；外部的js文件通过下面的方式把函数导出(没有导出的函数只能在内部用)：

module.exports ={formatTime: formatTime}

 推荐↓↓↓ 

长

按

关

注

涵盖：APP开发、Hybrid Apps、大数据科技、编程前端、Java、Python、Web编程开发、Linux、数据库研发、C#、.NET、全栈开发等。