文章目录
微信小程序开发框架
创建项目后系统自带创建简介
现场逐一讲解项目目录
结合 HTML，CSS，javascript 讲解
项目的保存和删除，移植
app.json 配置
pages 字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
1. 配置文件代码编写
app.json 配置
“window”: 窗体和背景的高置
window 字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我的微信",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true,
"backgroundColor": "#ddd"
}
导航条背景颜色：“navigationBarBackgroundColor”: “#000”,
导航条文字：“navigationBarTitleText”: “我的微信”,
导航条文字颜色：“navigationBarTextStyle”:“white”
下拉刷新：“enablePullDownRefresh”: true,
下拉刷新背景颜色：“backgroundColor”: “#ddd”
下拉刷新三个小点的动画效果：“backgroundTextStyle”:“dark”,(loadimg)
Pages：所有页面所存在的位置，让系统知道页面有多少路径
“sitemapLocation”: 站内地图、站内导航、站内搜索 (是否允许站内搜索)
“sitemapLocation”: “sitemap.json”
文档介绍网址：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
sitemap:
小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。
Json 的最后一行不能加豆号，加了会报错且不会编译
不记得单词
2. 底部触摸栏代码编写
制作页面底部的触摸栏
注意：图标的运用
"tabBar"最少 2 项，最多 5 项
app.json
PagePath:配置的页面路径
text:文本
iconPath:默认图标
selectIconPath:选中图标
“selectedColor”: “#f00”：选中字体的颜色
“borderStyle”:底部导航的分隔线颜色
工具配置 project.config.json
小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
JSON 语法
这里说一下小程序里 JSON 配置的一些注意事项。
JSON 文件都是被包裹在一个大括号中 {}，通过 key-value 的方式来表达数据。JSON 的 Key 必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON 的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool 值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
3、微信新页面的创建方式有 3 种
1.从 app.json 文件开始创建
2.单个文件逐一创建
3.删除文件后的编译自动创建
在 page 左键新建目录（如新建 about,在 about 文件左键->左键:新建 page->出现四个页面(about.js、about.json、about.wxnl、about.wxss
如何看见要编辑的代码页面：
在 app.json 页面中的 page 路径放到第一
添加编译模式—》设置相关名称和路径。
4、新页面创建的层次关系
1.所有页面都在 pages 文件中，也可以自行定位于自定义的其他文件，比如 page
2.在一个文件夹中创建一个页面（创建简单，代码清晰）
3.在一个文件夹中创建多个页面（层次清晰）
对应关系
WXML -> HTML
WXSS -> CSS
JS -> Javascript
JSON -> Javascript（json 对象）
App -> application
编码要求
不能直接使用 HTML 文件
可以全部使用 CSS 文件
Js 脚本文件没有 Window 对象
在微信小程中没有 window 对象，不能使用 dom 结构
app 是全局应用
标签
对应关系
view -> div
text -> font + span
navigator -> a (跳转从根目录出发)
组件
你只需要在 WXML 写上对应的组件标签名字就可以把该组件显示在界面上，例如，你需要在界面上显示地图，你只需要这样写即可：
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
5、注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
6、微信小程序的生命周期
微信小程序每个页面存在生命周期
onLaunch -> 小程序展开的时候
整个小程序的东西
onload -> 生命周期函数 - 监听页面加载
onReady -> 生命周期函数 - 监听页面初次渲染
第一次某个页面时操作
onShow -> 生命周期函数 - 监听页面显示
每次后台到前的台的显示
onHide -> 生命周期函数 - 监听页面隐藏
onUnload -> 生命周期函数 – 监听页面卸载
onPullDownRefresh -> 页面监听相关处理函数 – 监听用户下拉动作
onReachBottom -> 页面上拉触底事件的处理函数
onShareAppMessage -> 用户点击右上角分享
用户没有发送之前触发
任何小程序都是一个 app 对象，所以入是 app.js
onLaunch 创小程序最始初始化的一个方法
每一个页面启动时会启动 onLoadonReady
7、注册页面
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
**使用 Page 构造器注册页面 **
简单的页面可以使用 Page() 进行构造。
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
用户没有发送之前触发
任何小程序都是一个 app 对象，所以入是 app.js
onLaunch 创小程序最始初始化的一个方法
每一个页面启动时会启动 onLoadonReady
在页面中使用 behaviors
页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。
// my-behavior.js
module.exports = Behavior({
data: {
sharedText: 'This is a piece of data shared between pages.'
},
methods: {
sharedMethod: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
}
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
behaviors: [myBehavior],
onLoad: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
})
逻辑代码调式方法
控制台显示方式 console.log() console.info()
弹出框(API 框架时介绍)
wx.showToast({
title: 'this is about page',
})
模拟，真机调式模式
点击编译，预览，真机调试
逻辑代码调式方法
控制台显示方式 console.log() console.info()
弹出框(API 框架时介绍)
8、微信小程序的发布步骤
微信小程序开发完成后的测试及发布上传操作：
测试号： 不能进行上传
APPID：可以上传—>上传微信公众平台( 订阅号，服务号)：小程序管理功)能(关联)
9、功能简介
编译：对已有代码做保存、更新
预览：系统生成二维码，用手机微信扫码后可以在移动端看见
真机调试：同样生成二维码，在手机端可以查看运行，同时在 PC 端有调试结果
切后台：
清缓存：清除各种在运行期间所遗留下的缓存文件
版本管理：借助于 git，完成对当前微信小程序版本的控制，可以做任何版本控制。如推送，抓取等，同时也可以建立分支和合并分支
社区：互联网跳转链接，跳转到微信小程序论坛
在开发工具的帮助菜单里
测试号：互联网跳转链接，跳转微信开放文档-测试号申请页面
上传（APPID 才有）：提供上传代码至微信开放平台
10、微信小程序的发布步骤
1、点击“上传” 按钮，上传微信公众平台(小程序和小游戏的操作)
注意：只有在有正式 APPID 的情况下才有此按钮，测试环境是没有的
2、微信开放平台：原生的安卓和 ios 开发的接口操作，作为第三方移动程序提供接口，使用户可将第三方程序的内容发布给好友或分享至朋友圈，第三方内容借助微信平台获得更广泛的传播。从而形成了一种主流的线上线下微信互动营销方式。
3.打开微信公众平台
点击“提交审核”
4.三种状态
开发版本
审核版本
线上版本
同时也对应三种权限
> 公众平台服务号、订阅号、企业微信以及小程序的相关说明
- 订阅号：主要偏于为用户传达资讯（类似报纸杂志），认证前后都是每天只可以群发一条消息；
2.服务号：主要偏于服务交互（类似银行，114，提供服务查询），认证前后都是每个月可群发 4 条消息；
3.企业微信：是一个面向企业级市场的产品，是一个独立的 APP 好用的基础办公沟通工具，拥有最基础和最实用的功能服务，专门提供给企业使用的 IM 产品。（适用于企业、政府、事业单位或其他组织）；
4.小程序：是一种新的开放能力，开发者可以快速的开发一个小程序。小程序可以在微信内被便捷的获取和传播，同时拥有出色的使用体验。
图例说明：
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
