微信小程序开发入门学习记录（一）

1.  开发工具

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html

创建一个工程，选择不用云服务。选一个示例工程。

2. 目录结构， 一个页面有 wxml， wxss,  js 组成（相当于网页的HTML + CCS + javascript），其中wxml， wxss 是渲染层，js （javascript）是逻辑。json 存放一些键值对。

3. app.json 中，指定需要的页面

  "pages": [

    "pages/index/index",

    "pages/logs/logs"

  ],

以及一些窗口的配置

4. app.js中 构造函数 App 负责创建这个App， onLauch 是启动后的回调函数，还有其他回调。

5. app.wxss 存放一些全局的样式。

6.  index.js 中 构造函数 ，Page({}） 负责构造这个页面， 构造函数中有使用到的数据用data指定， 以及其他一些槽函数用来处理相应页面上的按键、文本输入。

7. index.wxml 中

7.1 <scroll-view class="scrollarea" scroll-y type="list">，  class 是样式，在wxss中可以找到。scroll-y type 是页面滚动模式。

 

7.2 标签的写法是 <TEXT> 内容 </TEXT>， 如果有属性写在第一个括号内， 比如<text class="nickname-label">昵称</text>

 

7.3 <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">  那么 <block>  </block>就是C语言的{ 代码块 }

　　wx:if 就是if  else 

7.4  按键  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">

　　open-type="chooseAvatar" 是打开类型，打开头像选择栏

　　bind:chooseavatar="onChooseAvatar" 是回调函数，选择头像栏选后回调

7.5 输入框  <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />

　　bind:change 是输入完后的回调

8. index.wxss 是样式，本页面所有的样式都先保存在此。

9. 本地存储，可以保存一些数据，例程是保存log

10. 微信登录获取用户的ID，

    wx.login({

      success: res => {

        // 发送 res.code 到后台换取 openId, sessionKey, unionId

      }

    })

11. 目前微信小程序就是前端开发，后端可以选择自己搭建服务器，或者使用微信云服务，那么接下来研究云。

12. 微信小程序和后端使用HTTPS请求