1.前言（坑爹的东西）项目源码：https://github.com/saucxs/wx_...微信小程序从2017年开始就受到了各种人的青睐，但经过一段时间后，反响依旧平平。随着下半年各项功能的开放，不少企业纷纷接入小程序。我觉得就算是坑我们也得踩一下。不然怎么从微信这个大流量体系中去推广引流。小程序内部可以理解为一个mvvm框架，分为逻辑层和视图层。逻辑层处理数据并发送给视图层，同时接收视图层的事件反馈。最近微信小程序特别火，很多人都在学习。下面就带大家搭建微信小程序调试环境（客户端+服务端），调试入门实践项目--phoneBook（JavaScript和node.js基础都可以，微信推荐的语言，看菜鸟教程简单的学习JavaScript、node.js、mysql、nginx），方便大家学习。2、相关概念官方解释：微信小程序是一种全新的连接用户和服务的方式。可以在微信中轻松获取和传播，具有极佳的用户体验。小程序是一种无需下载安装即可使用的应用程序。它实现了“触手可及”的应用梦想。用户可以通过扫描或搜索的方式打开应用。可以理解为微信中嵌套的一组app。与原生应用程序不同，它不需要下载，是一款小巧轻便的应用程序。三、开始工作1、本地koa后台服务部署，请参考快速创建一个简单的koa2后台服务。本文教你如何创建一个简单的koa后端服务。2、准备注册等工作（1）注册账号（2）下载开发者工具，下载1.02.x版本，最新版本有bug，调试器的Wxml窗口会出现空页面标签正在编译，里面没有内容。（3）注册后登录微信公众平台|小程序，在设置中找到开发设置，保存appID，后面开发用到。四、开始项目1、这时候工具就可以用了，ID有了，就开始我们的编码之旅吧。打开开发者工具，扫描二维码登录，选择小程序项目，点击右下角加号，新建项目，选择项目目录，填写appID，项目名称，完成后点击确定写作。2、确认后，默认打开后，发现已经为我们创建了一些代码。3.设置不验证合法域名这个设置是为了在本地开发环境下进行开发调试，必须勾选。4.正在运行。5、项目结构我们主要看pages文件夹下的app.js、app.json、app.wxss和wxml1、app.js这三个文件作为小程序的入口。其中有一个App实例。每个小程序将只有一个App实例。小程序启动后，触发onLaunch函数执行获取用户信息。2.app.json是小程序的所有全局配置。pages字段包含了所有页面的路径，window字段定义了所有页面的路径。顶部背景色、文字颜色详细配置请点这里3.app.wxss文件是页面常用的样式，只支持部分css选择器4.wxml是我们的HTML文件，常用的标签有view、text等，没有所谓的div、span、p标签，我们习惯称它们为组件六、设计理念1、小程序可以理解为一个mvvm框架，分为逻辑层和视图层，逻辑层处理数据并发送给视图层，同时接受视图层的事件反馈。//pages/login/login.jsconstapp=getApp();Page({/***页面初始数据*/data:{phone:'',password:'',isError:false,errorText:''},/***生命周期函数--监控页面加载*/onLoad:function(options){},/***输入电话号码*/bindPhoneInput:function(item){this.setData({phone:item.detail.value})},/***输入密码*/bindPasswordInput:function(item){this.setData({password:item.detail.value})},/***点击登录按钮*/login:function(item){if(this.data.phone===''||this.data.password===''){this.setData({isError:true,errorText:"电话号码或密码不能empty"})return;}letthat=this;wx.request({url:`${app.globalData.apiUrl}/login`,数据:{电话:this.data.phone,密码:this.data.password},方法:"POST",成功:function(res){if(res.data.success){wx.setStorageSync("USERID",res.data.userID);wx.switchTab({url:'/pages/department/department',});}else{that.setData({isError:true,errorText:"请输入正确的电话号码或密码"})}},fail:function(item){console.log(item)},complete:function(item){console.log(item)}})}，使用Page函数注册一个页面，接收一个Object参数这里我们使用onLoad来监听页面的加载，定义了一个bindPhoneInput函数，用于输入手机号码，并使用setData函数改变text的值，定义一个输入密码的函数bindPasswordInput，使用setData函数改变text的值，定义一个登录按钮的登录函数，通过wx.request方法请求后端服务接口，通过wx.setStorageSync方法将请求的结果添加到storage中，通过wx.switchTab方法跳转到对应的路由。
