小程序与普通网页的区别
网页开发渲染线程和脚本线程是互斥的，长时间未响应会导致脚本丢失。而在小程序中两者是分开的，分别运行在不同的线程中。
网页开发可以调用游览器中的DOM API，而小程序因为线程分开的缘故，缺少DOM API和BOM API。导致例如 jQuery等无法使用
小程序帐号申请
通过小程序注册页完成一系列流程后申请成功小程序帐号，完成后可以在小程序后台-开发-开发设置处得到之后开发需要的appID和appSecret
工具准备
1.微信开发者工具 下载稳定版本
创建第一个小程序
新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了。
小程序项目目录
配置文件
小程序配置app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
- pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
位于pages字段第一位的路径会是小程序展示的第一个页面，在开发是要开发一个新的页面时需要先把新页面的路径移动到第一位才可以在模拟器上看到开发的页面，方便样式调试。 - window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
工具配置 project.config.json.为大佬提供可以根据喜好对开发者工具做一些个性化配置，例如界面颜色、编译配置等等。在另一台电脑上使用时只要导入项目包就好自动帮你恢复原先电脑上的设置
小程序代码构成
pages文件夹中包含页面文件，创建page时会产生四个文件
- json 后缀的 JSON 配置文件
- wxml 后缀的 WXML 模板文件
- wxss 后缀的 WXSS 样式文件
- js 后缀的 JS 脚本逻辑文件
JSON 配置
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。(注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错)
具体内容参考小程序代码构成-JSON 配置
WXML 模板
从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。
具体内容参考小程序代码构成-WXML 模板
WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
新增了尺寸单位,WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼
具体内容参考小程序代码构成-WXSS 样式
JS 逻辑交互
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
具体内容参考小程序代码构成-JS 逻辑交互
对于小程序来说有一套自己的小程序脚本语言-WXS 语法，结合 WXML，可以构建出页面的结构。具体内容参考小程序脚本语言-WXS 语法
一些常用功能
服务器交互
前面的基础知识基本已经可以完成本地上的开发，对于一个项目来说还是不够，需要与服务端后台数据库有所交互。这个时候采用的是 wx.request()接口.
这个是一个账号登录方法，采用的请求方式为post，类似网页开发的ajax请求，访问服务器后台的接口方法，通过后台接口与数据库产生数据交互，完成增删改查功能。
常用的打印方式 console.log(），在调试的时候输出日志
writeinfo: function (e) {
console.log(e.detail.value);
var name = e.detail.value.txt_name;
var pswd = e.detail.value.txt_pswd;
const _this = this;
// 拼接请求url
const url = 'http://127.0.0.1:8089/system/login/login.aspx/Logins';
// 请求数据
wx.request({
url: url,//请求的路径
data: {"userinfo": name+","+pswd},//请求的参数
header: {
'content-type': 'application/json' // 默认值
},
method: 'post',//请求类型
success: function (res) {
console.log(res.data.d)
if(res.data.d=="true"){
wx.setStorageSync("Uname", name)
wx.redirectTo({
url: '../mian/mian',
})
}else{
console.log("登录失败")
}
}
})
}
页面跳转
一般我们进行页面调整的时候直接使用 wx.navigateTo({url:url})来跳转到某个页面，跳转的类型有很多种这里就不一一举例了，主要讲述下带参数的跳转和回调，直接看源码
adddetial: function (e) {
let that = this;
// 切割当前下标元素，更新数据
wx.navigateTo({
url: '../mian_add/mian_add',//跳转的路径
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
//这个方法属于自定的方法acceptDataFromOpenedPage，由转跳页面进行回调时触发这个方法，
//一般对于需要回调的页面来说是不会销毁当前页
acceptDataFromOpenedPage: function (data) {
if(data.data=="true"){
that.getbind();
}
}
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据，此时传入一个data数据，主要使用
//emit()方法，传递为键对，第一个参数为key值，第二个参数为json对象
res.eventChannel.emit('acceptDataFromOpenerPage', {
data: that.data.data_YY[index]
})
}
})
}
对于转跳页来说，如果上一个页面有数据传递过来，会在onLoad方法时接收传递过来的参数
onLoad: function (option) {
const eventChannel = this.getOpenerEventChannel()
let _this = this;//对于接口方法内要使用位于主页面的this需要先实例化一个对象在接口内调用
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function (data) {
if (data.data != null) {
_this.setData({
isadd :true,
datetime:data
})
console.log(_this.data.datetime);
}
})
},
一般在完成跳转页事件后关闭页面前进行回调传回参数
//跳转页传回参数，调用之前定义的acceptDataFromOpenedPage方法，传入data变量值，
//这个时候页面还没有关闭，但是前一个页面并没有关闭会直接对前一个页面完成修改，在用户不可见的状态下。
eventChannel.emit('acceptDataFromOpenedPage', {
data: _this.data.datetime.data
});
console.log(_this.data.datetime.data);
//通过 wx.navigateBack({})销毁当前页面
wx.navigateBack({})
