目的：通过4-5天的微信小程序学习，从0开始到能够发布一款今日头条小程序到线上。
目的：通过4-5天的微信小程序学习，从0开始到能够发布一款今日头条小程序到线上。
一、微信小程序是什么
运行在微信中的APP框架，可以简单理解为在微信中运行的网页。微信小程序要依赖微信APP。JQ插件依赖JQ一样。
小程序的使用体验接近原生APP，目前大部分中小型企业会选择开发小程序而不是开发独立版的APP。
二、 微信开发有哪些
- 微信公众号开发- H5，即移动端网站（跟微信无关只是将移动端页面链接到了公众号菜单中）
- 微信小程序开发目前在学习的
- 微信小游戏开发
三、开发小程序的准备工作
- 下载微信官方的开发者工具
- 需要申请一个APPID（需要注册一个微信小程序-今天不用，等发布时再注册）发布版本：体验版-审核版-正式版开发和发布微信小程序都是免费的
四、如何使用开发者工具
- 下载和安装https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 打开并扫描绑定开发者账号
- 通过该工具可以完成新建小程序模板、开发、调试、发布等一系列工作
五、如何新建一个微信小程序页面
使用开发者工具可以一键生成小程序项目模板。该模板相当于是vue的脚手架生成的vue的豪华版。
跟Vue的区别：
vue很多东西都需要自己下载，因为vue是渐进式的
微信小程序不需要下载任何东西，内置各种你想要的功能，比如路由内置了，ajax也内置了，所有的都可以直接使用，比vue还要强约定。
新建页面的步骤：在pages目录下右键单击新建文件夹，然后在该文件夹下右键单击新建page。新建后会自动将该页面注册到app.json中（即路由）
- 一个文件夹代表的就是一个页面
- 一个页面包括4个文件a. wxml（视图层-类似于HTML，不可省）b. wxss（外观层-同css,可省）样式的语法同css。c. js （逻辑层，用来获取数据和渲染数据的，不可省）
d.json（该页面的配置文件，比如配置页面的标题，标题背景色等）
注意：微信小程序是纯前端代码，在这里不能放任何后端代码，比如java、Python等都不能放。是绝对的前后端分离。
app.json说明：
"window": {
//下拉时的背景：light或dark
"backgroundTextStyle": "light",
//导航栏的背景色，只能写16进制的颜色代码
"navigationBarBackgroundColor": "#f60",
//标题
"navigationBarTitleText": "卡片应用",
//标题的颜色文字：只有black或white
"navigationBarTextStyle": "white"
},
六、在微信小程序中写样式
- 全局样式app.wxss中写的样式在任何页面下都可以生效
- 页面样式在当前页面下的样式文件中写的样式
- 注意问题写的样式跟css一模一样。但是微信中只支持常用的选择器，不要用那种冷门的css3选择器。即只支持部分css3选择器。
七、小程序常用标签学习
小程序的标签其实是自定义标签，也叫组件。
https://developers.weixin.qq.com/miniprogram/dev/component/
- view
类似于div，作用跟div一样，相当于是块级标签 <view class="box" style="color:red">内容</view> - imagehttps://developers.weixin.qq.com/miniprogram/dev/component/image.html
类似于img标签，作用一样 <image src="图片路径" mode="scaleToFill|aspectFit|aspectFill|widthFix"></image> - input
跟input一样 <input> - navigator
相当于是a链接 <navigator url="url">这里是链接</navigator> - text
相当于是行内标签 <text class="s1">内容</text>
八、小程序的几个常用指令
- 小胡子语法
<view>{{表达式或来自data中的数据}}</view> - wx:if 都是用来显示或删除元素
//vue v-if="数据或表达式" //小程序中 <view wx:if="{{数据或表达式}}">是否显示</view> - wx:for
//vue <li v-for="item,index in arr|obj">{{item}}</li> //wx <view wx:for="{{arr|obj}}" wx:key="index">{{item}}--{{index}}</view>
本次课笔记+作业链接:
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
