微信小程序入门开发学习

1.简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
微信交互主要体现在三个方面：

1. 获取当前登录微信的用户的用户信息
2. 微信支付
3. 使用模板消息向微信发送通知消息

语言基础：
wxml（和html原理类似、但是wxml简单）
wxss（和css基本类似、添加自身属性）
javascript（使用核心）

2.准备工作

下载安装开发工具

下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
根据自己的操作系统选择相应的链接进行下载安装。

登录
初次运行IDE时需要微信登录

新建小程序
创建小程序需要AppID，在刚开始没有完成制作，我们选择测试号；
项目名称和项目目录的子目录要一致；
勾选“在当前目录中创建quick start项目”，为方便初学者了解微信小程序的基本代码结构。

代码结构

• app.js：是小程序的脚本代码，必须要有这个文件。在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API；
  代码以App()方法开头，用来注册一个小程序，接收object类型的参数，其中onLAunch()会在打开应用时执行。onLaunch()-onShow()-onHide()-其他。
  

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

   ....//此处省略
   //创建本身存在，不需要写
})

• app.json：全局配置，配置小程序是由哪些页面组成，小程序的窗口背景色，导航条样式，默认标题等。该文件不可加任何注释
  "pages"一定要写路径，不然会报错

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

• app.wxss：整个小程序的公共样式，此处定义的样式所有页面都可以用
• pages：存放所有页面的文件夹
• utils：放通用工具类方法的一个文件夹

页面组成：（文件名必须相同）
wxml：组成页面结构 必须
wxss：页面的样式，优先级高于app.wxss
json：页面配置。设置app.json中的window配置项的内容，会覆盖app.json中的window配置项
js：页面初始化数据和页面逻辑 必须

    Page({
    data: {
    logs: []
    },
    onLoad: function () {
    this.setData({
    logs: (wx.getStorageSync('logs') || []).map(log => {
    return util.formatTime(new Date(log))
    })
    })
    }
    })

Page()用来注册一个页面，接收一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等
Data： {{ … }} 在页面显示data。setData({ … })修改data值

页面路由：简单地理解为页面切换

小程序接入流程

1. 注册
2. 小程序信息完善
3. 开发小程序
4. 提交审核和发布

注册账号

• 前往：https://mp.weixin.qq.com/ 选择小程序，点击注册

这里的密码是新设置的登录密码，不是qq密码。

• 激活邮箱：微信平台会给你的邮箱发送邮件，可以点击连接继续注册
• 信息登记：
  
• 之后就是填写小程序的信息了
  

小程序信息完善

补充小程序的基本信息，如名称、图标、描述等