微信小程序开发日记(一)

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

一. 小程序框架

• 底层基于react native 响应式开发框架
• 组件化开发
• 数据驱动 响应式数据绑定
• 分层开发 分为: 视图层 逻辑层
• 支持commonjs和ES6的写法

二.新建项目

1.新建本地项目

建立项目后设置一下

小程序项目目录结构

具体到每一个页面:
xxx.wxml是页面的结构,是类似与HTML的标记型语言

xxx.wxss是页面样式, 类似于CSS

xxx.js是逻辑处理, 类似于js文件

2.新建云项目

三.全局配置文件 app.json

小程序全局配置官方文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

1. page选项

page选项是声明小程序中页面的

2. window选项

window选项设置了窗口的表现

其中注意:

• enablePullDownRefresh和backgroundTextStyle和backgroundColor都是下拉相关的,要一起用
• onReachBottomDistance是只如果页面有滚动条,滚动条滚动到离底部还剩多少PX时触发到底事件
• 全局页面设置优先级低于页面的json配置文件中的配置, 所以我们可以单独修改某个页面的配置

3. tabbar选项

• tabbar里的list属性至少2项,至多5项
• 如果我们设置了custom, 需要再根目录下建立custom-tabbar文件夹,并放入自己的tabbar组件

每个list里的对象要这样设计:

例如:

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/asset/nomal/gift.png",
        "selectedIconPath": "/asset/active/gift.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "测试",
        "iconPath": "/asset/nomal/paper.png",
        "selectedIconPath": "/asset/active/paper.png"
      }
    ],
    "selectedColor":"#09e",
    "backgroundColor": "#eee",
    "borderStyle":"white"
  },

4. 其他选项

属性	描述
networkTimeout	各类网络请求的超时时间，单位均为毫秒
requiredBackgroundModes	申明需要后台运行的能力，类型为数组。可以后台播放音乐或定位
resizable	在 iPad 上运行的小程序可以设置支持屏幕旋转
navigateToMiniProgramAppIdList	跳转到其他小程序
usingComponents	全局自定义组件
permission	小程序接口权限相关设置

四. 页面配置文件

页面级的配置文件配置内容和全局中的window配置基本一样
但也有一些特有的

属性	描述
disableScroll	页面整体不能上下滚动
usingComponents	页面使用的组件

五. 页面的XXX.wxml中的数据绑定

1. 数据绑定 //相当于vue中的{{}}

和vue非常类似, 数据存放在 xxx.js的page实例的data对象里面,在xxx.wxml中引用

(1). 插值绑定

插值绑定是可以运算的

<view> {{a + b}} + {{c}} + 1 </view>
<view>{{"hello" + name}}</view>

(2). 组件属性 //相当于vue中的v-bind

<view id="{{id}}"> </view>

(3). 属性布尔值绑定 //相当于v-bind绑定布尔

<checkbox checked="{{false}}"> </checkbox>

属性绑定布尔值是可以三元运算的

<view hidden="{{flag ? true : false}}"> Hidden </view>

2. 条件渲染

(1). wx-if // 相当于vue中的v-if

<view wx:if="{{condition}}"> </view>
<view wx:if="{{length > 5}}"> </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如果一次性判断多个元素, 需要用<block>标签包装

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

vx:if和hidden的区别: 相当于vue里的v-if和v-show的区别, 一个是不渲染,一个是不显示

3. 循环渲染

(1). 循环 //相当于 v-for

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

可以使用wx:for-item可以指定数组当前元素的变量名，使用 wx:for-index可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

• 当 wx:for 的值为字符串时，会将字符串解析成字符串数组
• 花括号和引号之间如果有空格，将最终被解析成为字符串

(2). <block>包裹

如果循环多个标签,可以用<block>包裹

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

(3). wx:key //相当于 vue v-for的绑定key值

wx:key 的值以两种形式提供

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 如果循环的item是字符串或者数字,可以绑定保留关键字 *this , 代表在 for 循环中的 item 本身。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

六. 页面的XXX.JS逻辑文件结构

1. data数据操作

(1). 如何拿到data中的数据?

在生命周期函数及其他函数中, 通过 this.data对象拿到数据

(2). 如何修改data中的数据并渲染到页面? setData

与react及flutter类似, 需要使用setData修改数据

data: {
    msg:"hola~"
  },
  onLoad: function (options) {
    this.setData(
      {"msg":"hello"}
    )
  },

2. 生命周期方法

(1). onload

onload(Object query)一个页面只会调用一次, 默认传入 打开当前页面的请求query对象

3. 触发事件

七. 页面的xxx.wxss 样式文件

1. 布局与单位

• 小程序使用flex布局
• 小程序使用rpx弹性像素单位
• rpx规定屏幕宽为750rpx

2. 样式导入

@import "common.wxss";

3. 动态内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。一般的静态样式应该绑定class,并放在wxss文件中,如果有动态样式,可以内联绑定再标签中

• style 接收动态的样式
• class 静态的样式统一写到 class 中

<view style="color:{{color}};" />

4. 选择器

5. 布局!!!

推荐使用弹性盒模型布局方式
参考资料:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

弹性盒模型

如何一个元素被定义为display:flex,则其被称为一个容器
我们可以使用 flex-direction改变排列方向
我们可以使用 flex-warp来换行

八. 事件

1. 如何绑定事件?

只需要在标签中写bind+事件名就可以了

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

系统会默认传递一个参数 event 是点击相关信息

btn1Clicked(e){
    console.log(e)
  },

注意: 小程序的函数是不能加()的

2. 事件传值

传值不能通过(), 那怎么传? 需要用 data-属性=值传递
接收时,通过event.target.dataset对象接收

<!--pages/test/test.wxml-->
<button bindtap="btn1Clicked" data-info="hola">Click</button>

// pages/test/test.js
  btn1Clicked(e){
    console.log(e.target.dataset.info)
  },

事件分为冒泡事件及非冒泡事件

九. 路由导航

1. API路由

(1). wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

(2). wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。

(3). wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

(4). wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面

(5). wx.switchTab(Object object)

2. 如何传递参数?

btntap(){
    wx.navigateTo({
      url: '../test2/test2?key=value&key2=value2',
    })
  },

3. 事件管道

页面可以通过事件管道发送函数或数据给新打开的页面
在原页面:

btntap(){
    wx.navigateTo({
      url: '../test2/test2',
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test123' })
      }
    })
  },

这样理解:

在新页面中:

onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log('上一个页面传进来一个' + data.data)
    })
  },

现在我们可以给新页面传数据了,让我们来看看新页面如何回传数据:

onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {
      data: 'test1'
    });
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log('上一个页面传进来一个' + data.data)
    })
  },

老页面如何接收?

btntap(){
    wx.navigateTo({
      url: '../test2/test2?key=value&key2=value2',
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function (data) {
          console.log(data)
        },
      },
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        console.log(res)
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test123' })
      }
    })
  },

4. 组件导航

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

<navigator url="/pages/logs/logs">
    <button>click</button>
  </navigator>