微信小程序01 -- 基础知识

特点

触手可及，用完即走。就是微信里的原生APP。

小程序示例

微信搜索“小程序示例”，可以获得 组件 接口 云开发 的示例。

注册

搭建开发环境

下载“微信web开发者工具”即可。


微信web开发者工具

项目结构

约定大于配置，页面放在pages文件夹下。

Quick Start项目结构

其中，app.json是全局的配置文件，project.config.json是整个项目的描述文件，类似于node中的package.json。

页面组织结构

新建页面：

  1. 在app.json中添加对应页面
  2. 添加完毕后，pages文件夹中会自动生成对应的页面
  3. app.json中第一个页面对应初始页面

页面文件说明：

  1. demo.js
    页面逻辑文件，创建页面对象，处理页面生命周期，处理页面数据
  2. demo.wxml -- Wei Xin Markup Language
    定义页面元素结构，语法遵循XML
  3. demo.json（可选）
    设置当前页面工作时的window配置，会覆盖 app.json中的window设置
  4. demo.wxss -- Wei Xin Style Sheet（可选）
    定义页面样式，遵循css语法，在css基础上有扩展，例如rpx响应式像素

配置文件

页面配置文件优先于项目配置文件，即demo.json优先于app.json
页面的配置只能配置app.json中部分window配置项的内容


标签栏的配置

在小程序中，标签栏不是通过布局实现的，是通过配置实现的

app.json中tabBar的配置内容
注意：

  1. pages配置中对应的第一个页面，必须在tabBar中配置
  2. iconPath中的配置，不能使用相对路径，只能使用绝对路径。可在项目的根目录中设置assets文件夹放置图片
  "tabBar": {
    "list": [{
      "pagePath": "pages/foo/foo",
      "text": "foo",
      "iconPath": "assets/tabs/home.png",
      "selectedIconPath": "assets/tabs/home-active.png"
    },
    {
      "pagePath": "pages/demo/demo",
      "text": "demo",
      "iconPath": "assets/tabs/message.png",
      "selectedIconPath": "assets/tabs/message-active.png"
    }

逻辑与页面结构分离

视图层： WXML WXSS 展示逻辑层数据，接收用户输入
逻辑层：由js完成，处理生命周期事件

逻辑层的javaScript


应用的生命周期

应用的生命周期在app.js文件中

// 用于去创建一个应用实例对象
App({
  // 在整个应用启动时触发
  // 只会触发一次
  onLaunch: function () {
    console.log('应用启动')
  },
  // 应用程序显示到屏幕上
  // 每次成为焦点状态触发
  onShow: function (options) {
    console.log('应用前台显示')
    console.log(options)
  },
  onHide: function () {
    console.log('应用后台隐藏')
  },
  // 只能捕获到运行阶段的异常
  onError: function (msg) {
    console.log(msg)
  },
  // 除了生命周期的钩子函数，还可以定义其他成员
  // 定义的成员在其他页面中可共享
  foo: "bar",
  say () {
    console.log('hi~~~~')
  }
})

index.js可以使用app.js中定义的成员

  onLoad: function (options) {
    // 获取全局唯一的应用程序实例对象
    const app = getApp() 
    console.log(app.foo)
    app.say()
  },

页面的生命周期

页面的生命周期在页面对应的js文件中设置，例如index.js

// 创建一个页面实例对象
Page({
  data: {},
  // 页面加载
  // 适用于数据初始化
  onLoad () {
    console.log('index page on load')
    this.setData({ foo: 'hello yd'})
  },
  // 页面进入焦点状态（前台展示）
  onShow () {
    console.log('index page on show')
  },
  onHide () {
    console.log('index page on hide')
  },
  // 当前页面渲染完成
  onReady () {
    console.log('index page on ready')
    // 举例，只有页面加载完成，才可以设置标题
    wx.setNavigationBarTitle({
      title: 'foo',
    })
  },
  // 页面卸载 当前页面被销毁
  onUnload () {
    console.log('index page on unload')
  }
})

index.wxml

<text>{{ foo }}</text>

数据绑定 和 wxs

在小程序中，所有的数据都定义的逻辑文件，例如index.js中的data中
index.wxml

<view class='container'>
  <!-- mustache 小胡子语法 可用于输出逻辑层暴露的数据 -->
  <text>{{message}}</text>
  <!-- mustache 可以作用在元素的内容和属性上 -->
  <input value='{{message}}'></input>
  <!-- 字符串拼接 运算 逻辑判断 三元表达式 均可 -->
  <input value='{{message}}~~~'></input>
  <text>{{ 22 + 22 }}</text>
  <!-- wxml中属性的值如果在引号内部 它永远是字符串 如下，第一个勾选了，第二个没勾选 -->
  <checkbox checked='false'></checkbox>
  <checkbox checked='{{false}}'></checkbox>

  <text>{{foo.addFn(1)}}</text>
</view>

<!-- wxs 类似与html中的script标签 -->
<wxs module='foo'>
  // 此处导出的对象可直接在界面上使用
  // 此处代码必须遵循commonjs规范 
  // 报错 -- 暂未解决
  module.exports = {
    addFn: function (value) {
    return value + '1'
  }
</wxs>

index.js

Page({
  data: {
    // data对象里的所有属性都可以在界面中访问到
    message: "hello goudaner~"
  }
})

基本组件

小程序提供的常用标签组件

  1. view
    hover-class属性，指定按下去的效果，当值为none时，没有点击动态效果。

tag.wxml

<view hover-class="bg">
  点我试试
</view>

tag.wxss

.bg {
  background-color: yellow;
}
  1. text
    显示普通的文本，text里面只能嵌套text
    selectable 文本是否可选
    decode 是否解码

tag.wxml

<text selectable="{{true}}">
  长按我试试
</text>
<text decode="{{true}}">
  冯&nbsp;薪&lt;朵
</text>
  1. image
    web中图片标签和背景图片的结合，不支持背景图片的写法
    mode 裁切、缩放的模式
    lazy-load 懒加载，只针对page与scroll-view下的image有效
  2. swiper
    tag.wxml 
<view>
  轮播
  <swiper indicator-dots="false" indicator-color="rgba(0,0,0,.3)" indicator-active-color="rgba(0,0,0,.8)" autoplay="true" interval="1000">
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

wxss

swiper-item {
  background-color: pink;
}
  1. navigator
    tag.wxml 
<!-- target self/miniProgram -->
<!-- open-type 
navigate 保留当前页面，跳转到其他页面，不能跳转tabbar页面
redirect 关闭当前页面，跳转到其他页面，不能跳转tabbar页面
switchTap 跳转到tabbar页面，关闭其他页面
reLaunch 关闭所有页面，打开应用内的某个页面
navigateBack 返回上一页面
exit 退出小程序，target为miniProgram时生效
-->
<navigator target="self" url="../message/message" open-type="navigate">
  点击跳转
</navigator>

自定义组件

创建自定义组件，创建位置/components/Mytext

控制属性

条件渲染

condition.wxml

<view wx:if="{{ isLoading }}">
  <text>加载中……</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else>
  <text>加载完毕！！！</text>
</view>

<!-- 对于频繁切换的元素 不应使用wx:if 应使用hidden -->
<view hidden="{{ !isLoading }}">
  <text>加载中……</text>
</view>
<view hidden="{{ isLoading }}">
  <text>加载完毕！！！</text>
</view>

<!-- block是包装元素 不会对界面的结构造成影响 -->
<view>
  <block wx:if="{{ isLoading }}">
    <text>加载中</text>
    <text>……</text>
  </block>
  <text>嘤嘤嘤~别隐藏我~~~</text>
</view>

condition.js

Page({
  data: {
    isLoading: true
  },
  onReady () {
    setTimeout( () => {
      this.setData ({ isLoading: false})
    }, 3000)
  }
})

列表渲染

each.js中，提供要渲染的数据，和视图层的事件处理函数

Page({
  data: {
    snh: [
      { id: 1, name: 'fxd', age: 18 },
      { id: 2, name: 'htt', age: 16 },
      { id: 3, name: 'fqy', age: 17 },
      { id: 4, name: 'qyw', age: 19 },
    ]
  },
  // 页面上除了生命周期钩子外，可定义其他函数
  // 这些函数可作为视图层元素的事件处理函数
  addItemHandle () {
    const snh = [{ id: Math.floor(Math.random()), name: 'nc' + Math.floor(Math.random()), age: Math.floor(Math.random()) + 10}].concat(this.data.snh)
    this.setData({ snh })
  }
})

each.wxml

<view>
  <!-- 写法1 -->
  <!-- item index 是默认的  -->
  <!-- key值必须要配 详见写法3中的说明 -->
  <view wx:for="{{snh}}" wx:key="{{id}}">
    <text>{{index}}</text>
    <text>name: {{item.name}}</text>
  </view>
  <!-- 写法2 -->
  <!-- item改变 -->
  <view wx:for="{{snh}}" wx:for-item="jxl" wx:key="{{id}}">
    <text>{{index}}</text>
    <text>name: {{jxl.name}}</text>
  </view>
  <!-- 写法3 -->
  <!-- wx:key 绑定的是单项属性名称，属性名前不必加item -->
  <!-- 如果是纯数组，没有属性名称，那么可以使用*this去指定当前被遍历的元素 -->
  <view wx:for="{{snh}}" wx:key="id">
    <checkbox/>
    <text>{{item.name}}</text>
  </view>
  <!-- key值，每个数据的唯一标识，确定数据和界面内容的一一对应关系 -->
  <!-- 如果不加key值，这边新增内容后，勾选的项目会发生改变 -->
  <button bindtap="addItemHandle">add</button>
  <!-- 写法4 -->
  <!-- 循环内容为字符串时，会拆开字符串 -->
  <view wx:for="fxdd" wx:key="*this">--{{item}}--</view>
</view>

事件处理

dothings.js中定义事件处理函数

Page({
  // 定义应用于界面层的事件处理函数
  tapHandle (e) {
    console.log(e)
  }
})

dotings.wxml中调用事件处理函数

<button bindtap="tapHandle">点击</button>

当点击按钮时，控制台打印结果如下


打印结果
  1. timeStamp -- 触发事件的时间，与页面加载完成的时间差
  2. target -- 拿到当前被点击的元素
  3. detail -- 以屏幕左上角为原点，触发事件时点击的坐标

事件冒泡

在小程序中，绑定事件时，将bind改成catch就能阻止事件冒泡。
dotings.js

Page({
  // 定义应用于界面层的事件处理函数
  tapHandle (e) {
    console.log(e)
  },
  viewTapHandle (e) {
    console.log('冒泡', e)
  }
})

dothings.wxml

<view bindtap='viewTapHandle'>
  <!-- 使用bindtap会冒泡 -->
  <!-- <button bindtap="tapHandle">点击</button> -->
  <!-- 使用catchtap不会冒泡 -->
  <button catchtap="tapHandle">点击</button>
</view>

获取当前行的参数

可以通过data-xx属性，给事件处理函数传递额外的参数。
dothings.js

Page({
  removeHandle (e) {
    console.log(e)
  }
})

dothings.wxml

<view>
  <text>item 1</text>
  <button bindtap='removeHandle' data-id='1'>移除</button>
</view>
<view>
  <text>item 2</text>
  <button bindtap='removeHandle' data-id='2'>移除</button>
</view>
<view>
  <text>item 3</text>
  <button bindtap='removeHandle' data-id='3'>移除</button>
</view>

当点击第二个移除按钮时，控制台数据如下


单项数据流

小程序和react相似，都是单项数据流

单项数据流

需求：输入框中值改变时，上方显示的文字也发生变化

代码：
index.js

Page({
  data: {
    content: 'fxd is fdd'
  },
  inputChangeHandle (e) {
    // 1. 改变数据源
    // 2. 通知框架，重新渲染页面
    this.setData({content: e.detail.value})
  }
})

index.wxml

<text>{{content}}</text>
<input value='{{content}}' bindinput='inputChangeHandle'></input>

index.wxss

input {
  border: 1px solid pink;
  margin: 20px;
  padding: 10px;
}

小程序不同于vue，数据发生变化时，如果要在页面的其他位置展示变化后的数据，一定要在逻辑层使用setData

wxss和css的对比

  1. rpx
    rpx（responsive pixel）：可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx。

百分比的缺点：
margin padding使用百分比时非常混乱
百分比涉及到父子盒子之间的传递

  1. weui
    微信小程序的ui框架，使用时可以在dist/example中找demo。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,036评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,046评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,411评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,622评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,661评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,521评论 1赞 304
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,288评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,200评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,644评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,673评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,281评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2赞 355