微信小程序学习笔记（一）--建立微信小程序

1、建立小程序

一、申请账号、安装及建立小程序，请参照官方文档里面的操做 https://developers.weixin.qq.com/miniprogram/dev/。css

小程序在建立的时候会要求指定文件目录，后面能够在其余的编辑器中打开代码。html

建立的时候没有AppID的话，能够先使用一个测试ID。点击界面下的“使用测试号”生成一个便可。es6

二、建立好的界面以下：json

2、代码构成

文件类型

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等。其余配置信息参考全局配置。小程序

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

pages字段 —— 用于描述当前小程序全部页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪一个目录。
window字段 —— 定义小程序全部页面的顶部背景颜色，文字颜色定义等

工具配置 project.config.json

{ "description": "项目配置文件。", "packOptions": { "ignore": [] }, "setting": { "urlCheck": true, "es6": true, "postcss": true, "minified": true, "newFeature": true }, "compileType": "miniprogram", "libVersion": "2.0.4", "appid": "wxc1d1888819c8e137", "projectname": "newWechatProgram", "isGameTourist": false, "condition": { "search": { "current": -1, "list": [] }, "conversation": { "current": -1, "list": [] }, "game": { "currentL": -1, "list": [] }, "miniprogram": { "current": -1, "list": [] } } }

具体设置参考开发者工具的配置微信小程序

页面配置 page.json

{ "navigationBarTitleText": "查看启动日志" }

其余配置参考页面配置api

WXML 模板

WXML 充当的就是相似 HTML 的角色。打开 pages/index/index.wxml：微信

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

标签名字：微信直接将经常使用的`view`, `button`, `text等，以标签的形式包装好，提供给开发者。`具体参考小程序的能力

属性以及表达式。使用MVVM开发模式，提倡把渲染和逻辑分离。不要再让 `JS` 直接操控 `DOM`，`JS` 只须要管理状态便可，而后再经过一种模板语法来描述状态和界面结构的关系便可。想问文档参考WXML

若是须要把一个 Hello World 的字符串显示在界面上，只须要在WXML 这么写 :网络

<text>{{msg}}</text>

JS 只须要管理状态便可:app

this.setData({ msg: "Hello World" })

经过 {{ }} 的语法把一个变量绑定到界面上，即数据绑定。仅仅经过数据绑定还不够完整的描述状态和界面的关系，还须要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS 样式

WXSS 具备 CSS 大部分的特性，同时作了一些扩充：

新增了尺寸单位：rpx，开发者能够免去换算的烦恼，只要交给小程序底层来换算便可，因为换算采用的浮点数运算，因此运算结果会和预期结果有一点点误差。
提供了全局的样式和局部样式，和前边 app.json, page.json 的概念相同，你能够写一个 app.wxss 做为全局样式，会做用于当前小程序的全部页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器

更详细的参考 WXSS

JS 交互逻辑

编写 JS 脚本文件来处理用户的操做。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

index.js中

//index.js //获取应用实例
const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo') }, //事件处理函数
  bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse){ // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回
      // 因此此处加入 callback 以防止这种状况
      app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理
 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function(e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } })

具体参考 WXML事件

微信小程序的API

小程序的启动

微信客户端在打开小程序以前，会把整个小程序的代码包下载到本地。

紧接着经过 app.json 的 pages 字段就能够知道你当前小程序的全部页面路径:

{ "pages":[ "pages/index/index", "pages/logs/logs" ] }

小程序的在开发者工具中编辑时，程序会在保存代码文件后自动刷新，不须要另外的启动命令。

小程序启动后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({ onLaunch: function () { // 小程序启动以后 触发
 } })

整个小程序只有一个 App 实例，是所有页面共享的，更多的事件回调参考文档注册程序 App 。

程序与页面

pages/logs/logs目录下有四种类型文件，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你均可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js。

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

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一块儿渲染出最终的结构，因而获得了咱们看到的小程序的样子。

在渲染完界面以后，页面实例就会收到一个 onLoad 的回调，你能够在这个回调处理你的逻辑。

有关于 Page 构造器更多详细的文档参考注册页面 Page。

组件

编辑器里面只添加了<map></map>，保存后，左侧便出现了地图的效果。

更多组件参考小程序的组件。