小程序基础

微信公众平台

https://mp.weixin.qq.com/ 注册时可选择类型：订阅号、服务号、小程序、企业微信 每个邮箱仅能注册一个小程序。 个人类型小程序：无法使用微信支付、无法使用卡包功能

小程序文档API

小程序开发文档

微信开放社区

微信开发社区

目录说明

默认目录

• pages-----------------------页面相关
  • index -----------------首页文件夹
    • index.js -----------首页js
    • index.json----------首页配置
    • index.wxml----------首页html
    • index.wxss----------首页css
• utils-----------------------工具相关
• app.js ---------------------项目总js
• app.json--------------------全局配置( 页面路由以及头部、底部导航的配置等)
• app.wxss -------------------项目总样式css
• project.config.json --------项目配置

代码构成

.json ：配置文件，以json格式存储配置 项目中有三种配置：项目配置（project.config.json）、全局配置（app.json）、页面配置（index.json） .wxml: 相当于html文件 .wxss: 相当于css .js : 就是js

文件说明

project.config.json项目配置 部分代码说明

setting：{ urlCheck 是否检测安全的域名 es6 是否把es6转es5 postcss 是否把css样式自动补全 minified 是否压缩 }

app.json 全局配置

全局配置API

wxml 相关介绍

wxmlAPI

<view>{{motto}}</view>

//循环渲染
<view wx:for="{{list}}" wx:key="{{index}}">
      {{index}} {{item}}
</view>

//改变for循环item和index的名称
<block wx:for="{{list}}" wx:for-item="data" wx:for-index="inx">
 {{inx}} {{data}}
</block>

//条件渲染 (类似vue的v-if、v-else)
<view wx:if="{{isLogin}}">已登录</view>
<view wx:else>请登录</view>

//条件显示（类似vue的v-show）
<view hidden="{{isLogin}}">显示内容</view>

//绑定点击事件
<button bindtap=“tapName”>按钮</button>

Page({
  tapName: function(event) {
    console.log(event)
  }
})
...

wxss 相关介绍

wxssAPI

尺寸单位：rpx，根据屏幕宽度自适应。 引入外部wxss：@import ’...‘

js相关介绍

WXS（WeiXin Script）是小程序的一套脚本语言 wxsAPI

绑定点击事件

<button bindtap=“onTapHandler”>点我+1</button>
<view>{{count}}</view>

Page({
  data: {
    count: 0
  },
  onTapHandler: function() {
   this.setData({
    count: this.data.count++
   })
  }
})

阻止事件冒泡

把绑定方式 bindtap 换成 catchtap 即可。

第三方库

WeUI

weUI是一套同微信原生视觉体验一致的基础样式库

iView Weapp

一套高质量的微信小程序UI组件库

Vant Weapp

轻量、可靠的小程序UI组件库

云开发

小程序传统开发模式

客户端 -----> 服务端（后端代码、数据库）------> 运维（DB维护、文件存储、内容加速、网络防护、容器服务、负载均衡、安全加固等...）

小程序云开发模式

客户端 -----> 云开发（云函数、云数据库、云存储）

传统开发 VS 云开发

开发效率低 Serverless（无服务） 运维成本高 开发者更关注业务逻辑

无服务（Serverless）开发是未来的发展趋势

云开发三大基础能力

云函数

（相当于传统开发中的后台接口） 获取appid、获取openid、生成分享图、调用腾讯云SDK ...

云数据库

数据的增、删、改、查 ...

云存储

管理文件、上传文件、下载文件、分享文件 ...

每个小程序账号可免费创建两个环境，建议：开发环境、生成环境

云数据库能力

云开发提供了一个json数据库，提供2GB免费存储空间。

数据类型

String 字符串 Number 数字 Object 对象 Array 数组 Boolean 布尔值 GeoPoint 地理位置点 Date 时间 （精确到毫秒ms，客户端时间） Null 空

操作云数据库

小程序控制（读写数据库受权限限制） 云函数控制（拥有所有读写数据库的权限） 控制台控制（拥有所有读写数据库的权限）

云数据库权限管理

仅创建者可写，所有人可读 （适合于文章） 仅创建者可读写 (适用于私密内容) 仅管理端可写，所有人可读（适用于商品信息） 仅管理端可读写（适用于后台敏感数据）

操作云数据库

//初始化数据库
const db = wx.cloud.database() // 小程序端初始化数据库，如果在云函数端不需要加wx

//切换环境(开发环境/生产环境)
const testDB = wx.cloud.database({
 env: 'test'
})