微信小程序-开发笔记附自己的demo

2374 查看

我是做iOS开发的,很多人都会说这个微信小程序又是动态的,我不反对苹果对动态的讨厌,毕竟这样很容易不受控制,但是ReactNative(中文网)不是还活的好好的吗(貌似版本到了0.33了)!而且我觉得可以学个大概万一真用到的时候也不至于无所适从(我先做个非常简陋的电商类,完事后放到下面)。学习!学习!学习!才不会被淘汰。

申明 :会将我认为是问题的问题记录下来,如果您觉得太简单可以关掉。并且我是边做小程序边写的这个博客,会一直更新,!!!MAC环境

我可以说不太懂微信小程序的语言。它使用XML+JS ,不支持HTML5,兼容部分CSS写法(从这个句号到这句话完事我是抄来的,因为我不懂XML和JS)。不懂但是不能开发吗?我觉得语言都是相通的,还好之前做了React Native项目(总觉得很相似),上手小程序也很快。

从头开始 - 开始一个项目

工具下载安装

微信小程序开发者工具下载

  • 开发工具缺少appid问题,这个只要破解就可以了(引用 一)

新建项目

  • 不清楚是开发工具的原因还是怎么回事,说好新建一个项目会有一个QuickStart的,然而我并没有所以打开就是这个样子的

error
  • 只能从官网下载一个HelloWorld直接放大开采创建的项目路径下面

文件结构


默认的


默认就几个文件剩下的就是目录再加上不同名字的这个几个文件当然还得加上.wxml,这个文件就是来书写界面的

代码

app.json


app.json
  • pages : 应该就是项目加载文件的入口(用应该的原因是我不确定),如果此处不加载的话后面用了也是不会有所显示的(这里是确定的如果不信可以尝试)。
  • window : 程序的窗口
  • tabBar : 很好理解就是标签栏(App下面负责切换不同界面)

需记录问题

scroll-view

注意问题

  • 横向需要给scroll-view 一个高度height: 200px文档上是这么说的但是scroll-view中元素设置高度就可以将scroll-view撑起来了

只展示第一个元素滑动无效

  • scroll-view需要设置white-space: nowrap;(百度一下:文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。)

  • 子元素设置display:inline-block(百度一下:让一个元素具有“区块元素”的属性(可以设置width和height),又具有“内联元素”的属性(不产生换行))

这样scroll-view可以正常展示了

问题:但是scroll-view如果绑定wx:for = '{{数据}}'子类中有一个view 他一直都是column排列不会是row排列。希望有人帮解决

针对上面问题 我只能用swiper来解决暂时未想到办法.

发布于2016-10-2日

自己做的demo很丑但是希望给星

引用 一