微信小程序

微信项目结构

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

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

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

页面赋值和刷新

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

页面事件处理

页面事件

路由

导航组件
导航API

  • 怎么传值给下一个页面
    1.通过跳转url拼接?title=xxx&msg=xxx
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))。

  • 怎么传值修改上一个页面或者堆栈中的页面值
    1.跳转页面前通过获取page实例修改
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,可以构建出页面的结构。

注意

  • wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
  • wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
  • wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
  • wxs 函数不能作为组件的事件回调。
  • 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

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

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

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,516评论 9 295
  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,410评论 0 3
  • 0、杂记 0.1、在实际的开发中,图片资源不会存储在小程序的目录中,因为小程序的大小不能超过1MB(现在改为2M)...
    it筱竹阅读 5,330评论 0 10
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,333评论 0 9
  • 最近小程序火了,是时候收藏一波了! 1:微信小程序官方工具:https://mp.weixin.qq.com/de...
    Sky109阅读 13,570评论 2 97