微信小程序学习笔记一

JS-SDK 开放拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等API，解决移动网页能力不足的问题，然而用户访问网页，浏览器开始显示之前有一个白屏的过程

增强版，“微信Web资源离线存储”

影响Web体验的问题：白屏，页面切换的生硬，点击的迟滞感

小程序

快速的加载，更强大的能力，原生的体验，易用且安全的微信数据开放，高效简单的开发

逻辑层，渲染层分离

运行环境	逻辑层	渲染层
IOS	JSCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

开发你的第一个小程序

在官方文档中下载安装适合你的微信小程序开发工具，配置测试号

成功进入之后显示如下，（点击左上角的编译可在左侧看到小程序的显示样式）

$<img src="d:\Users\mj\Desktop\屏幕截图(37)_看图王.png" alt="屏幕截图(37)_看图王" styl$

代码构成

项目自动生成了不同类型的文件：

.json后缀的配置文件；
.wxml后缀的WXML模板文件；
.wxss后缀的WXSS样式文件；
.js后缀的JS脚本逻辑文件；

`JSON`配置

小程序配置`app.json`

当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部tab等

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],//描述所有页面路径，目的是为了让微信客户端知道当前你的小程序页面定义在哪个目录
    "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor":"#fff",
        "navigationBarTitleText":"WeChat",
        "navigationBarTextStyle":"black"
    }//所有页面的顶部背景颜色，文字颜色定义等
}

工具配置`project.config.json`

在工具上做的任何配置均会写入此文件，重新安装工具或更换电脑工作，只要载入同一个项目的代码包，开发者工具会自动帮你恢复至当时开发项目时的个性化配置，包括编辑器的颜色、代码上传时自动压缩等等一系列选项

页面配置`page.json`

pages/logs目录下的logs.json这类与小程序页面有关的配置

可让开发者独立定义每个页面属性，例如顶部颜色，是否允许下拉刷新等

完整页面配置

JSON语法

数字，包含浮点数，整数；
字符串，包裹于双引号中；
Bool值，true或false；
数组，包裹于[];
对象，包裹于{};
Null

【注】 无法使用注释，试图添加注释会报错

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>

标签名不同；

增加wx:if这样的属性以及{{}}这样的表达式

MVVM开发模式(例如React,Vue)，提倡将渲染、逻辑分离，即让JS直接操控DOM，JS只需管理状态，然后通过一种模板语法来描述状态和界面结构的关系

栗子：将一个Hello World的字符串显示在界面上

WXML

<text>{{msg}}</text>//数据绑定
<view wx:for="{{array}}"> {{item}} </view>//列表渲染
//条件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> app </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

JS只需管理状态

//数据绑定
this.setData({msg:"Hello World"})
//列表渲染
Page({
    data:{
        array:[1,2,3,4,5]
    }
})
//条件渲染
Page({
    data:{
        view: 'MINA'
    }
})

({})将一个变量绑定至界面上，称之为数据绑定，加上if/else,for等控制能力，在小程序里，这些控制能力均用 wx:开头的属性表达

WXSS样式------css

新增尺寸单位

rpx
提供全局样式和局部样式

app.wxss作为全局样式，作用于所有页面，page.wxss仅对当前页面生效
仅支持部分css选择器

JS逻辑交互

响应用户的点击、获取用户位置等，小程序中编写JS脚本文件处理用户的操作

<view>{{msg}}</view>
<button bindtap="clickMe">点击我</button>

点击button按钮时，希望将界面上msg显示为"Hello World",于是在button上声明一个属性:bindtap,JS文件中声明clickMe方法响应这次点击事件

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

此外还可调用小程序提供的丰富的API，例如获取用户信息、本地存储、微信支付等

调用wx.getUserInfo获取微信用户的头像和昵称，最后通过setData将获取的信息显示至界面

API文档

事件监听API

规定以on开头的API用来监听某个事件是否触发，wx.onSocketOpen

接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入

wx.onCompassChange(function(res){
    console.log(res.direction)
})

同步API

规定以Sync结尾的API都是同步API，其执行结果可通过函数返回值直接获取，若执行出错会抛出异常

try{
    wx.setStorageSync('key','value')
}catch(e){
    console.error(e)
}

异步API(占多数)

Object参数说明

参数名	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功，失败均执行)
其他	Any	-	接口定义的其他参数

回调函数的参数

success,fail,complete函数调用时会传入一个Object类型参数，包含以下字段

属性	类型	说明
errMsg	string	错误信息，若成功返回`${apiName}:ok`
errCode	number	错误码，仅部分API支持，成功时为`0`
其他	Any	接口返回的其他数据

异步API执行结果需通过Object类型的参数中传入的对应回调函数获取，部分API也有返回值，

wx.login({
    success(res){
        console.log(res.code)
    }
})

mm jiao

发布了26 篇原创文章 · 获赞 6 · 访问量 1440

私信关注