慕课-小程序-轻松入门...

vapp与小程序对比：

开发成本，维护成本，开发周期，更新。。。

	app	小程序
开发成本	高	低
开发周期	长	短
升级维护	复杂	简单
推广成本	高	低

。。。

成本：app在ios(objectC语言)和android(java语言)。小程序可以跨平台。
推广：各个商城中的排名。小程序不用。

学习内容：

基础内容：注册申请，开发工具
代码构成：JSON，WXML，WXSS，JS，
云开发：云数据库，云函数，云存储
案例：上线审核

注册

https://mp.weixin.qq.com/
主体为个人是没法实现支付和卡包、附近的小程序功能的！只能是企业。

appId获取：开发/开发设置/appId => 每个小程序的唯一标识。

每个邮箱只能有且只能申请一个小程序。
主体信息一旦填写，无法修改。

下载开发者工具

微信开发者工具下载：在小程序开发文档/下载中，下载。

工具介绍

模拟器，编辑器，调试器，云开发，小程序模式，普通编译，等等

代码构成

.json：配置文件，以json格式存储一些配置。三种：全局配置，页面配置和项目配置。
.js：脚本逻辑文件，就是js。
.wxml：模板文件，相当于html。
.wxss：样式文件，相当于css。

json文件：

project.config.json：项目配置
app.json：全局配置。
page.json：页面配置

app.json：

• pages：每个页面的路径都要写在数组里，相当于一个路由。如果在下面配置路径，会自动在对应文件夹下生成文件夹且包含四种文件！！！
• window：一些颜色和文字的配置。

其中：color使用的是16进制，直接用red是无效的。

如果想要底部tab页的设置：如果找？
路径：微信公众平台/文档/指南/配置小程序/全局配置
=>list数组可以增加底部的tabbar。其他的可以修改样式。
如果想切换到某个页面的时候，也改变头部的样式，可以在单独的页面的json文件中配置，eg：切换到cloud页面，那么在cloud.json中配置。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#000000", // 背景颜色
  "navigationBarTextStyle": "white", // 字体颜色
  "navigationBarTitleText": "云开发" // 标题
}

注：头部叫：nav；底部叫：tabbar

WXML

WXML：WeiXin Markup Language。 =>标签就是组件了！
常用组件：
view：
image：

语法：

• 数据绑定：动态数据，来自Page的data。语法：mustache（双大括号）。

其中：Page为对应.js文件中的Page函数。

• 循环：wx:for="{{list}}" 使用：index，item。唯一标识：wx:key="{{index}}""

<view wx:for="{{list}}" wx:key="{{index}}">
{{item.name}}{{item.age}}
</view>

• 条件渲染

<view wx:if="{{isLogin}}">用户：jerry</view>
<view wx:else>请登录</view>

hidden：

<view hidden="{{!isLogin}}">我是hidden的内容</view>

WXSS

路径：指南/小程序框架/视图层/WXSS。
WXSS：WeiXin Style Sheets。
rpx(responsive pixel)：可以根据屏幕宽度进行自适应，适配不同宽度的屏幕。
import：可以引入外部的wxss。

注：开发小程序时，设计师可以使用iphone6作为视觉稿的标准。
iphone6的w为375，正好为750的一半。整数的倍数，用rpx时很方便。

引入第三方样式库：
WeUI：
iWiew Weapp：
Vant Weapp：

JS

bindtap事件：

<button size="mini" bindtap='onTapHandler'>增加</button>


  onTapHandler:function(){
    console.log("增加了1");
    // this.data.count++;  // 这种方式无效，必须使用setData方法
    this.setData({
      count:this.data.count+1,  // this.data.count++无效。
    })
  },

事件冒泡：
catchtap：不允许冒泡；bindtap：会冒泡。
事件的另一种写法：

bind:tap  
catch:tap

事件对象：event
自定义属性：data-*
eg：data-id=“myId”
获取：
e.target.dataset.id

<view class='box' catch:tap='onTapBox' data-id="ks-id">
  <view class='child' catch:tap='onTapChild'></view>
</view>


  onTapBox:function(e){
    console.log("box...")
    console.log(e)
    console.log(e.target.dataset.id)
  },

云开发

腾讯云与微信推出的一个小程序的解决方案 => 云函数，云数据库，云存储。

将服务端的部署和运营环节，进行服务端的托管，给腾讯云去管理，不需要在运维和管理方面投入时间了。

• 传统开发模式：
  客户端：前端
  服务端：后端代码，数据库
  运维：数据库运维（DB运维），文件存储，内容加速（cdn），网络防护，容器服务，负载均衡，安全加固，等等。。。

• 小程序云开发模式

客户端：前端
云开发：云函数（nodeJs），云数据库(mogoDb)，云存储(腾讯云)。

注：无服务（serverless）开发小程序是未来的发展趋势。开发者更关注业务逻辑。

云函数：
为用户提供在云端运行代码的能力，支持微信私有协议的天然鉴权，
=>获取小程序的appid，获取用户的openid，生成分享图，调用腾讯云的SDK，等等，
也可以通过云函数进行数据库的操作。

云数据库：
nosql的数据库，mogodb，可以通过 小程序直接调用数据库，也可以通过云函数，调用数据库，实现对云数据库的增删改查。

云存储：
管理文件，上传文件，下载文件，分享文件，等

云开发控制台：

概览，用户管理，数据库，存储管理，云函数，统计分析，