一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

介绍原生小程序开发中常用的东西。

一、小程序结构

app.js：小程序的逻辑,一般小的项目app.js中不会有太多代码，只有一些比如检测版本更新之类的（后边会说）
app.json 小程序公共配置
- pages:页面的路径列表 pages的路径也就是页面的文件路径
```
  "pages": [
    "pages/index/index",
    "pages/my/my",
    "pages/logs/logs"
  ],
复制代码
```
- tabBar: 底部 tab 栏的表现
  - color: tab 上的文字默认颜色，仅支持十六进制颜色
  - selectedColor: tab 上的文字选中时的颜色，仅支持十六进制颜色
  - backgroundColor: tab 的背景色，仅支持十六进制颜色
  - borderStyle: tabbar 上边框的颜色，仅支持 black / white
  - list: tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
    - pagePath: 页面路径，必须在 pages 中先定义
    - text: tab 上按钮文字
    - iconPath: 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
    - selectedIconPath: 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
  - position: tabBar 的位置，仅支持 bottom / top
  - custom: 自定义 tabBar，(后边细说)
```
"tabBar": {
    "color": "#999",
    "selectedColor": "#6576ff",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/[email protected]",
        "selectedIconPath": "static/[email protected]"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/[email protected]",
        "selectedIconPath": "static/[email protected]"
      }
    ]
  },
复制代码
```
app.wxss 小程序的样式公共配置
pages目录：存在小程序的页面
index.json:页面的配置文件
- navigationBarBackgroundColor: 导航栏背景颜色，如 #000000
- navigationBarTextStyle: 导航栏标题颜色，仅支持 black / white
- navigationBarTitleText: 导航栏标题文字内容
- navigationStyle:导航栏样式，仅支持以下值：`default 默认样式\custom` 自定义导航栏，只保留右上角胶囊按钮。参见注 2。
- backgroundColor: 窗口的背景色
- backgroundTextStyle: 下拉 loading 的样式，仅支持 dark / light
- backgroundColorTop: 顶部窗口的背景色，仅 iOS 支持
- backgroundColorBottom: 底部窗口的背景色，仅 iOS 支持
- enablePullDownRefresh: 是否开启全局的下拉刷新
- onReachBottomDistance:页面上拉触底事件触发时距页面底部距离，单位为 px
- pageOrientation: 屏幕旋转设置，支持 auto / portrait / landscape
- restartStrategy: 重新启动策略配置\
- initialRenderingCache:页面初始渲染缓存配置，支持 static / dynamic
- visualEffectInBackground:切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
- handleWebviewPreload: 控制预加载下个页面的时机。支持 static / manual / auto
static存在静态文件多指图片，但是图片不应超过200KB

二、点击事件

常用的事件

一般就是bindtap，阻止事件冒泡用catch事件互斥事件绑定mut-bind 事件列表

touchstart：手指触摸动作开始
touchmove：手指触摸后移动
touchcancel：手指触摸动作被打断，如来电提醒，弹窗
touchend：手指触摸动作结束
tap：手指触摸后马上离开
longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap：手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend：会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart：会在一个 WXSS animation 动画开始时触发
animationiteration：会在一个 WXSS animation 一次迭代结束时触发
animationend：会在一个 WXSS animation 动画完成时触发
touchforcechange：在支持 3D Touch 的 iPhone 设备，重按时会触发

点击事件获取参数的方式

<button data-index="1" data-name='2' bindtap="handleClick">这是个点击事件</button>
复制代码

能看到这是个点击事件，通过data-XXX，拿到页面的数据

js文件中使用

 handleClick (even: any) {
    const { index, name } = even.currentTarget.dataset
    console.log(index, name)
 }
复制代码

三、生命周期

这里少了个onLaunch,这个生命函数写在app.js里

然后我们看下小程序刚进入触发的函数

然后切换页面后触发的生命函数

四、页面常用标签

WXML:WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

<!--wxml-->
<view> {{message}} </view>
复制代码

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
复制代码

wx:for

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


// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
复制代码

条件渲染


<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>


// page.js
Page({
  data: {
    view: 'MINA'
  }
})

复制代码

还有一个模板，这个后边说

input

小程序的input和vue的input稍有区别小程序的input是通过事件绑定修改数据

bindinput：键盘输入时触发
bindfocus：输入框聚焦时触发
bindblur：输入框失去焦点时触发，
bindconfirm：点击完成按钮时触发
bindkeyboardheightchange：键盘高度发生变化的时候触发此事件

四、页面间跳转

小程序api地址：developers.weixin.qq.com/miniprogram…

wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch：关闭所有页面，打开到应用内的某个页面
wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
EventChannel：页面间事件通信通道
wx.navigateToMiniProgram：打开另一个小程序
wx.navigateBackMiniProgram：返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功。注意：微信客户端 iOS 6.5.9，Android 6.5.10 及以上版本支持
wx.exitMiniProgram：退出当前小程序。必须有点击行为才能调用成功。

除wx.switchTab外，其他的页面都是可以传参数的

页面间通信事件

这是必须是wx.navigateTo

例如，my页面传数据到log页面中

my.js


    wx.navigateTo({
      url: '/pages/logs/logs',
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
          console.log('acceptDataFromOpenedPage',data)
        },
        someEvent: function(data) {
          console.log('someEvent',data)
        }
      },
      success: res => {
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: '我的页面的数据' })
      }
    })
复制代码

log.js

const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
   console.log(data)
})
复制代码

点击页面跳转，可以看到

五、分享功能

用户点击右上角转发onShareAppMessage

onShareAppMessage() {

    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })

    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
    }
}
复制代码

return一个object,用于自定义收藏内容

- title：页面标题或账号名称
- path: 当前页面 path ，必须是以 / 开头的完整路径
- imageUrl：页面截图 最好是w:h=1:1
- promise:如果该参数存在，则以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数
复制代码

除次之外还可以用button按钮转发

<button open-type="share">
   转发按钮
</button>
复制代码

使用button事件时，onShareAppMessage会有参数返回，

onShareAppMessage(even) {
    if(even.from === 'button') {
        // 来自按钮转发
    }

    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
    }
}
复制代码

even有三个参数：

- from：转发事件来源。 `button`：页面内转发按钮； `menu`：右上角转发菜单
- target：如果 `from` 值是 `button`，则 `target` 是触发这次转发事件的 `button`，否则为 `undefined`
- webViewUrl：页面中包含`web-view`组件时，返回当前`web-view`的url
复制代码

转发朋友圈onShareTimeline()

事件处理函数返回一个 Object，用于自定义分享内容，不支持自定义页面路径，返回内容如下：

title: 自定义标题，即朋友圈列表页上显示的标题
query: 自定义页面路径中携带的参数，如 path?a=1&b=2 的 “?” 后面部分
imageUrl:自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1

同时在使用分享朋友圈的时候必须调用wx.showShareMenu

wx.showShareMenu

显示当前页面的转发按钮,参数Object

withShareTicket：是否使用带 shareTicket 的转发[详情]
menus：本接口为 Beta 版本，暂只在 Android 平台支持。需要显示的转发按钮名称列表，默认['shareAppMessage']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种
success：接口调用成功的回调函数
fail：接口调用失败的回调函数
complete：接口调用结束的回调函数（调用成功、失败都会执行）

代码：

 onLoad() {
    wx.showShareMenu({
        withShareTicket: true,
	menus: ['shareAppMessage', 'shareTimeline']
    })
  },
  onShareTimeline() {
    return {
      title: '我的页面',
      query: '/pages/my/my?id=1',
      imageUrl:''
    }
  },
复制代码

收藏 onAddToFavorites


onAddToFavorites(res) {
    // webview 页面返回 webViewUrl
    console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: '自定义标题',
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',
    }
  }

复制代码

六、修改数据setData

常规修改数据

// wxml
<view>{{num}}</view>

// my.ts
Page({
  data: {
    num: 1,
  },
  onLoad() {
    this.setData({
      num: 2
    })
  },
})

复制代码

修改对象的数据

<view>张三的岁数:{{userInfo.age}}</view>

data: {
  userInfo: {
      name: '张三',
      age: '100'
  }
},
  
this.setData({
   'userInfo.age': 1
})
复制代码

修改数组

list: [
   {id: 1, label: 'label1'},
   {id: 2, label: 'label2'},
   {id: 3, label: 'label3'},
]

this.setData({
   ['list[1].label']: '我是改变的label'
})
复制代码

七、获取用户信息

获取code wx.login()

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

复制代码

获取用户信息 wx.getUserProfile

该api的调用必须是button按钮调用

<button open-type="getUserInfo" bindgetuserinfo="getUserProfile">获取用户信息</button>
复制代码

getUserProfile() {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
复制代码

未完待续！！！

原生小程序开发项目复盘

一、小程序结构

二、点击事件

常用的事件

点击事件获取参数的方式

三、生命周期

四、页面常用标签

数据绑定

wx:for

条件渲染

input

四、页面间跳转

页面间通信事件

五、分享功能

用户点击右上角转发onShareAppMessage

转发朋友圈onShareTimeline()

wx.showShareMenu

收藏 onAddToFavorites

六、修改数据setData

常规修改数据

修改对象的数据

修改数组

七、获取用户信息

获取code wx.login()

获取用户信息 wx.getUserProfile

猜你喜欢

原生小程序开发项目复盘

一、小程序结构

二、点击事件

常用的事件

点击事件获取参数的方式

三、 生命周期

四、页面常用标签

数据绑定

wx:for

条件渲染

input

四、 页面间跳转

页面间通信事件

五、分享功能

用户点击右上角转发onShareAppMessage

转发朋友圈onShareTimeline()

wx.showShareMenu

收藏 onAddToFavorites

六、修改数据setData

常规修改数据

修改对象的数据

修改数组

七、获取用户信息

获取code wx.login()

获取用户信息 wx.getUserProfile

猜你喜欢

三、生命周期

四、页面间跳转