一、前言
![]() 界面比较丑,大家将就一下 二、通过本文你能了解什么
三、小程序
![]() 小程序的位置,截图来自微信官方
四、开发前的准备
五、小程序的文件格式 文档![]() 截图来自官方文档
//获取应用实例var app = getApp()Page({ // 数据,在 WXML 中 通过 {{motto}} 就可以拿到对应 data 中的 motto 字段的值 data: { motto: MiHome_Store, userInfo: {}, indicatorDots: true, autoplay: true, interval: 3000, duration: 100 }, //事件处理函数,可以通过 bindViewTap: function () { wx.navigateTo({ url: ../logs/logs }) }})
不设置全局窗口window{ pages:[ pages/index/index, pages/logs/logs ]} 设置全局窗口window,在app.json 中设置{ pages:[ pages/index/index, pages/logs/logs ], window: { navigationBarBackgroundColor: #ffffff, navigationBarTextStyle: black, navigationBarTitleText: 小程序, backgroundColor: #eeeeee, backgroundTextStyle: light, enablePullDownRefresh: false }} 单独页面中设置窗口配置信息,不需要添加window标签{ backgroundTextStyle:light, navigationBarBackgroundColor: #fff, navigationBarTitleText: gitkong, navigationBarTextStyle:black} ![]() json 文件配置 六、我是怎么写出来的(代码比较多,只给出做法思路,详细看Demo)
> 保存编译(command + s),然后就能显示出来了![没样式布局是这样的啦](http://upload-images./upload_images/1085031-d0f49652b593690d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/400)- 2、接下来就要去布局样式了,在对应 `WXSS` 文件中 编写 CSS 代码 /指定子类布局,通过空格/ /素内弹性盒元素的方向,row|row-reverse|column|column-reverse|initial|inherit;//row 是水平向右,默认的/ /垂直对齐居中/ /不用选择器,就是全部text 都设置/ image{ > 保存编译(command + s),然后你发现正常显示了(新项目默认app.wxss 中有布局,将 `padding: 200rpx 0;` 注释掉 就能显示如下效果)![布局样式后好看多了](http://upload-images./upload_images/1085031-09a5789e8e420812.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/400)- 3、事件处理,可以通过 `bindtap=对应 js 里面的方法名` 给 view 绑定一个 事件 > WXML 中 绑定了 事件
>对应 js 文件中的方法,方法里面实现了跳转,通过 `wx.navigateTo` 跳转,url 传入的是 绝对路径 //事件处理函数 - 4、多条数据显示,当然只需要去拷贝、粘贴,只需要去改显示的内容,css 和 事件 都不需要去管,只要 class 是一样,样式就一样 ![多条数据显示](http://upload-images./upload_images/1085031-25d318e0eb581223.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)- 5、点击显示隐藏,这个可以在WXSS 通过 `display` 属性或者在 WXML 通过 hidden属性 来控制器,作者使用的是display 方式实现的 > WXML 中添加 判断,通过在js 中获取是否显示,来决定是否需要布局显示样式 >WXSS 中实现两种样式,显示和隐藏 .frame-detail-view { .frame-detail-view-show{ - 6、优化- (1)小程序中,数据获取是通过 `{{data中的对应字段名}}` ,那么WXML 中的数据显示可以在js文件中获取,实现动态修改,特别是列表数据,只需要通过 `wx:for-items` 遍历,有多少条数据就显示多少个view,这点类似iOS 的 tableViewCell 和 model ,数据可以是多种多样,显示不同的数据就用不同的model,有多少个model 就有多少个cell 。- (2)绑定事件跳转,可以在js 对应方法中用 `wx.navigateTo` 实现,可以通过 data 或者 id 传url进去,但这样就变得麻烦了,跳转还可以利用 `navigator` 标签,然后 设置 url 属性就可以- (3)层级结构比较多,具体点击哪个view 是需要 告诉 js ,js 才能去处理,一开始不知道data 可以传入多个值,只通过id 传入当前点击的目录名字,然后js 方法里面遍历寻找,从最底层开始往上遍历,虽然能实现,但效果很不好,会卡;后来直接通过data 传入当前点击的各个层级对应的index 下标(`wx:for-items` 默认下标是 index 对应元素是 item ,可以通过 `wx:for-index` 和 `wx:for-item` 修改),然后就类似iOS 的代理方法,在方法内获取对应的层级index,然后通过 `this.setData(data)` 修改data (**注意:页面数据更新都需要使用 `this.setData(修改的data)` **)- (4)看[官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html?t=20161122)可以知道,WXML 和 WXSS 都可以通过import 或者 include 导入引用,简单来说就是模板嘛(这点类似iOS 的封装),通过上面三个步骤优化之后,就有 WXSS 和 WXML 模板了,在指定页面通过 `@import ../index/index.wxss;`引入index.wxss 模板 和 `@import ../index/index.wxss;` 引入index.wxml 模板,此时只需要去修改指定页面 js 文件的data 数据就可以了#七、手机预览- 需要 **[注册 AppID](https://mp.weixin.qq.com/cgi-bin/wx)** 才可以,而 注册 是需要 是企业 或者 政府 或 媒体 或 其他组织,没有个人的,因此个人项目是没办法手机上预览(类似真机调试),如果你想试试真机效果,官方的Demo就可以![微信注册小程序截图](http://upload-images./upload_images/1085031-21f087e029254729.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)#八、总结- 1、虽然入门才几天,但是遇到的问题还是挺多的,为了避免本文章篇幅太长,影响阅读,我在 **[小程序开发中的记录【持续更新】](http://www.jianshu.com/p/1052b4f7eb5b) ** 都会记录下来,欢迎 关注 & like- 1、作者一直使用Objective-c 编程,工作需要嘛,当然 swift 和 前端也有去学去写,原理相通,只不过是换种写法,这个作为个人项目,会一直更新,直到功能完善,Demo的最新更新会在文章开头- 2、写的Demo 虽然挺简单的,思路应该也说清楚了,分享出来也应该能带大家入门,**[Github 地址](https://github.com/gitkong/SmallProgram)** 如果大家还有什么不明白的或者上文有什么不正确的地方,欢迎评论指教,谢谢- 3、欢迎大家关注我,喜欢给个like 和 star ,更新也需要动力喔~ |
|