程序开发F2e踩坑之路iOS 开发

小程序官方文档-小程序版

2016-12-15  本文已影响13566人  gitKong

更新：2016.12.21 完成 “框架” 所有详情页面搭建并封装了各种模板 Github 欢迎star

一、前言

界面比较丑，大家将就一下

二、通过本文你能了解什么

三、小程序

其实小程序就是类似之前的服务号，公众号的存在，看下图，引用Allen Zhang 的话：“小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。”

小程序的位置，截图来自微信官方

现在流量越来越来，手机网络也是越来越好，网页端现在确实越来越火了，原生移动端的小伙伴都开始不淡定了，我也是一直从事iOS 开发，说实话，我一点都不担心，没有为什么的，出来就学嘛！编程的东西，原理思路都一样，只不过实现代码换了而已，到现在为止，小程序的开发工具一个大版本都没有（最新版本是0.11.112301），发展还需要一段时间，这段时间够你去学的啦

个人认为是修改版的HTML、CSS、JS，因为它跟前端的很像，只是变了些东西，例如没有HTML 的 div 容器，现在可以用 view 、scroll-view ，等下再分析；如果你是接触过前端开发一段时间，那你上手估计只需要几个小时，或者更短，如果你是做其他开发，没接触过前端开发，那你就需要去熟悉一下HTML、CSS、JS 的语法了，推荐几个网站：(不分先后)

  • 菜鸟教程 ，作者也是在这学习的喔
  • W3school ,这个类似菜鸟教程，挺全面的
  • 1纳米学习 ， 这个网站比较全面，总有你需要的
  • 简书 ，程序员很多都在简书开源，我也是其中之一
  • Github ， 这个不解释
  • sololearn，这个是纯英文的，不过挺好的，一步一步学习

四、开发前的准备

五、小程序的文件格式 文档

截图来自官方文档 
//获取应用实例
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）

<view class="container">
<view bindtap="bindViewTap" class="frame-item">
<text class="frame-directory">目录结构</text>
<image class="frame-directory-img" src="../../image/arrowright.png" />
</view>
</view>

> 保存编译（command + s），然后就能显示出来了

![没样式布局是这样的啦](http:https://img.haomeiwen.com/i1085031/d0f49652b593690d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/400)


- 2、接下来就要去布局样式了，在对应 `WXSS` 文件中 编写 CSS 代码

/指定子类布局，通过空格/
.container .frame-item{
background-color: lightcyan;
/内边距/
/padding-left: 20px;/
width: 100%;
height: 44px;
/保持一致，不管子控件/
flex: 1;
/有四个值，上右下左/
margin: 10rpx;

/素内弹性盒元素的方向,row|row-reverse|column|column-reverse|initial|inherit;//row 是水平向右，默认的/
display: flex;
/flex-direction: row;/

/垂直对齐居中/
align-items: center;
/justify-content属性定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;/
justify-content: space-between;
}

/不用选择器，就是全部text 都设置/
text{
/左对齐/
text-align: left;
/内边距/
padding-left: 20px;
font-size: 16px;
}

image{
width: 20px;
height: 20px;
/外边距/
margin-right: 20px;
}


> 保存编译（command + s），然后你发现正常显示了（新项目默认app.wxss 中有布局，将 `padding: 200rpx 0;` 注释掉 就能显示如下效果）


![布局样式后好看多了](http:https://img.haomeiwen.com/i1085031/09a5789e8e420812.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/400)

- 3、事件处理，可以通过 `bindtap="对应 js 里面的方法名"` 给 view 绑定一个 事件

  > WXML 中 绑定了 事件

<view bindtap="bindViewTap" class="frame-item">
<text class="frame-directory">目录结构</text>
<image class="frame-directory-img" src="../../image/arrowright.png" />
</view>


  >对应 js 文件中的方法，方法里面实现了跳转，通过 `wx.navigateTo` 跳转，url 传入的是 绝对路径

//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}


- 4、多条数据显示，当然只需要去拷贝、粘贴，只需要去改显示的内容，css 和 事件 都不需要去管，只要 class 是一样，样式就一样

  ![多条数据显示](http:https://img.haomeiwen.com/i1085031/25d318e0eb581223.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 5、点击显示隐藏，这个可以在WXSS 通过 `display` 属性或者在 WXML 通过 hidden属性 来控制器，作者使用的是display 方式实现的

  > WXML 中添加 判断，通过在js 中获取是否显示，来决定是否需要布局显示样式

<view class="frame-detail-view {{frameItem.isShow ? 'frame-detail-view-show' : ''}}">


>WXSS 中实现两种样式，显示和隐藏

.frame-detail-view {
/不显示/
display: none;
}

.frame-detail-view-show{
/显示/
width: 100%;
/垂直布局/
display: flex;
flex-direction: column;
}


- 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:https://img.haomeiwen.com/i1085031/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 ，更新也需要动力喔~
上一篇 下一篇

猜你喜欢

热点阅读