微信小程序

2018-11-08  本文已影响0人  翰墨_42a6

微信项目结构

项目开发的目录结构,微信已经为开发者规范好了,结构清楚明了,很容易分辨和阅读。

  1. 小程序的主体部分(程序的入口)
    由3个文件组成,必须放在项目的根目录,如下:
文件 必需 作用
app.js 小程序逻辑(生命周期函数..)
app.json 小程序公共配置
app.wxss 小程序公共样式表
  1. 一个小程序页面由四个文件组成,分别是:
文件类型 必需 作用
js 页面逻辑(页面周期函数..)
wxml 页面结构
json 页面配置
wxss 页面样式表

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

页面赋值和刷新

它的页面赋值、刷新跟RN差不多(数据推动),都是通过在js逻辑层通过一个函数去实现的。看代码....

页面事件处理

页面事件

路由

导航组件
导航API

onLoad: function (options) {
     console.log(options.title);
}

2.跳转页面通过获取page实例取值

onLoad: function (options) {
      var pages = getCurrentPages(); // 获取页面栈
      var currPage = pages[pages.length - 1]; // 当前页面
      var prevPage = pages[pages.length - 2]; // 上一个页面
      console.log(prevPage.data.xxx);
}

3.把当前页面数据放入本地缓存( wx.setStorage(wx.setStorageSync),下一个页面再从缓存中取出(wx.getStorage(wx.getStorageSync))同时退出登录时要清除缓存(wx.clearStorage(wx.clearStorageSync))。

xxxFunction: function () {
      var pages = getCurrentPages(); // 获取页面栈
      var currPage = pages[pages.length - 1]; // 当前页面
      var prevPage = pages[pages.length - 2]; // 上一个页面
      prevPage.data.xxx;//只修改、添加值;
      prevPage.setData({
                xxx:xxxxx
      });//同时刷新页面;
     wx.wx.navigateBack();//返回
}

2.也可以把当前页面数据放入本地缓存,上一个页面再从缓存中取出。

其他的像网络API、存储API 等等可以去官方查看对应文档,有详细的介绍。官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/

下面讲讲小程序中的一些特殊设计点

为了让开发者开发的项目更容易扩展和迭代、解耦、复用。微信小程序框架提供了很多能力,简单介绍几个。

模板功能

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
其实有点像IOS中的宏定义功能,一个占位符,编译打包后占位符位置替换成具体UI标签

自定义组件

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

WXS文件

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

注意

小程序其它功能和能力大家可以去官方查看
https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18110719

简单说说开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/different.html

上一篇 下一篇

猜你喜欢

热点阅读