1--走进微信小程序的世界
走进微信小程序的世界
小程序是什么？小程序应用前景
小程序是一种无需下载安装，即可使用的手机应用。只需要扫描二维码，或是搜一搜，就能立即使用。
小程序是微信端推出的一种不用下载安装，依托于微信大数据为背景的应用。
这一两年相信大家慢慢感觉到消费习惯和生活趋势慢慢在改变，吃个饭排队，有用小程序，去店里买杯咖啡，有用小程序，玩手机游戏，有小程序，连酒店住宿，也用上了小程序。可谓吃喝玩乐、衣食住行方方面面都被小程序包围了。
小程序相比app确实有不少优势，
对开发者：
1、方便快捷，即用即走。
不需要再下载什么APP啦，既费流量，又占空间内存。小程序就是方便，即用即走。
2、速度快、不占内存
因为小程序前端代码都是存在微信服务器上的，在腾讯云端存放呢，所以无需加载，直接就打开了，速度也比较快。并且还不占用手机内存。
3、安全稳定、保密性强
其实小程序就类似苹果商店，首先需要审核才能发布。其次小程序通信采用的是https访问，SSL加密通信，并且小程序样式代码都封装在微信小程序里面，所以安全性更高，更稳定。
4、功能丰富，场景丰富
可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。
5、开发成本低、维护简便
同样的功能，做一个APP估计需要十几万甚至几十万，而开发一个小程序，一般几千元就搞定了。维护起来也比较简单方便。
6、附近定位、入口众多
开放的入口比较多，除了通过扫码，发送朋友，搜索，附近等常用入口外，还能与公众号关联，群发文章嵌入，公众号菜单链接等。
总的来说，小程序的推广和使用是一种发展趋势。
微信小程序的注册流程
微信开发者工具安装及使用
微信开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
小程序目录结构分析
page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
data
初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
新建页面的方式
新建页面的步骤：
（1）右键新建page生成页面的框架
（2）配置路由，在app.json中的pages添加我们新建页面的路径
微信小程序有四种类型的文件
js 类型文件
小程序的逻辑代码文件 小程序对js es6的处理比较友好，基本上我们的es6语法都需要使用babel插件去转化成es5（具体是什么原因，自己可以去了解一下），对于es6特定的api还需要使用polyfill去处理，但是小程序的开发工具和内置基础库内置基础库，全部都已经给你处理了，这一点非常pretty。
json 类型文件
在小程序中json文件一般都是配置文件 导航栏背景颜色 导航栏标题文字内容 窗口的背景色 等都由json文件配置，json配置文件，又有全局配置（及根目录下的app.json）局部配置例如 每个page下的json文件，局部配置会覆盖全局配置
wxml 类型文件
这个就相当与html文件，只不过微信小程序的标签和html有所不同并且小程序拥有所谓的模板语法，详情请看 小程序模板语法
wxss
相当于css文件，但也有所不同，小程序所用的单位不是px 而是rpx，rpx可以根据屏幕宽度进行自适应，类似于css的html的rem，但又有所不同，具体细节可以如下
同时wxss支持引入外联样式表
此外,也可以在wxml的标签上加入内联样式
小程序配置文件分析
app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.json----小程序的全局变量设置文件(app.json)
pages就是我们有多少个页面。
window是页面的一些属性。
tabbar是页面底部的tab。
设置pages
接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，
数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
设置标题栏
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
根据需求，可自调整：
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "德林云课堂",
"navigationBarTextStyle": "white"
},
注意：
修改小程序显示名称--- "navigationBarTitleText": "德林云课堂",
设置导航栏
tabBar需要配置2~5个tab
"tabBar": {
"color": "#fff",
"selectedColor": "#ff6699",
"backgroundColor": "#FEDA22",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tabbar/home.png",
"selectedIconPath": "images/tabbar/homeactive.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "images/tabbar/bm.png",
"selectedIconPath": "images/tabbar/bmactive.png"
},
{
"pagePath": "pages/logins/logins",
"text": "日志",
"iconPath": "images/tabbar/action.png",
"selectedIconPath": "images/tabbar/actionactive.png"
}
]
},
创建完空页面后，调试器打开，提示
sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，
可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false开发工具更新后,代码有些地方需要做相应的调整"checkSiteMap": false,
找到project.config.json
查找：
"checkSiteMap": true,
改为：
"checkSiteMap": false,
还没有留言，还不快点抢沙发？