小程序模板网

从iOS来看微信小程序

发布时间:2018-04-13 14:57 所属栏目:小程序开发教程

来自原文地址

本文由 iMetalk 团队的成员 Lefe 完成,主要帮助读者从iOS的角度入门小程序。 
对于一名iOS开发者来说,微信小程序的出现,让我们感觉到些许的不安,Lefe接触一段时间后,发现其实不然,微信小程序不可能替代原生APP,也没有绝对的优势战胜原生APP。不过,微信小程序固然有它的好处,比如我们需要用到的那些不常用的服务。对于小企业来说,可以更便捷地宣传他们的服务,给顾客一个更好的线下体验。那么对于一个iOS开发的成员来说开发小程序会有哪些挑战呢?

回顾iOS的开发过程

最基本的iOS开发,大致会有以下流程:

  • 开发工具,Xcode;
  • UI层,页面的搭建;
  • 网络层,基本的网络请求;
  • 页面跳转及传值;
  • 事件;
  • 数据层,缓存;

小程序开发流程

小程序的开发流程完全可以按照开发一个原生APP的流程,Lefe也是按照这个流程入门小程序的。总体感觉没那么复杂,相信只要你静下心来仔细的去研究,开发一款微信小程序是很容易的。

一:开发工具

iOS开发我们使用Xcode开发,下载直接安装,新建一个项目,即可运行。微信小程序使用官方提供的工具微信Web开发者工具,下载安装,即可创建项目,不过创建项目时需要微信授权登录。同样,创建项目的时候微信提供了一个模板,打开项目即可看到实时预览的效果。不过这里有一个比较坑的问题是,预览小程序时不能链接VPN。Lefe建议打开微信Web开发者工具前关闭VPN,等项目运行起来后再打开VPN。

二:搭建UI界面

对于iOS开发者来说,UI布局可以使用坐标(Frame)来直接布局一个视图,也可以使用自动布局。而对于微信小程序来说,建议使用Flexbox布局,它会给你一种不一样的布局方式。Flexbox布局,也叫弹性布局,是CSS3提出的一种布局解决方案。说到布局时,必须说明一下rpx,这种屏幕适配解决方案让我们羡慕忌妒恨(开玩笑呢)。

rpx的全称是responsive pixel,它是小程序自己定义的一个尺寸单位,可以根据当前设备屏幕宽度进行自适应。小程序中规定,所有的设备屏幕宽度都为750rpx,根据设备屏幕实际宽度的不同,1rpx所代表的实际像素值也不一样。

比如我们要实现以下布局,仅需要不多的几行代码就可以搞定,关于Flexbox布局这里不做更多的解释。有兴趣的同学可以找相关资料。

1.简单的Flexbox布局:

简单的几行代码: 
.wxml文件:


// class='xxx',xxx样式,如同CSS样式
<view class="flex-container">
    <view class="children1"></view>
    <view class="children2"></view>
    <view class="children3"></view>
</view>

.wxss文件:


.flex-container {
    height: 200rpx; // 注意单位 rpx,当然px也可以
    display: flex; // 设置这个属性后,表示为Flexbox布局
    flex-direction: row; // 布局方向为行
    justify-content: space-around; // X轴的对齐方式
    align-items: center; // Y轴的对齐方式
    background-color: lightblue;
}
.children1 {
    height: 100rpx;
    width: 100rpx;
    background-color: red;
}
.children2 {
    width: 100rpx;
    height: 100rpx;
    background-color: yellow;
}
.children3 {
    width: 100rpx;
    height: 100rpx;
    background-color: purple;
}

2.微信小程序没有UITableView:

如果想做一个列表,只能用scroll-view,而且特别好用,我们只需要把你将要创建的视图添加到scroll-view标签中即可,也不需要计算子视图的高度。比如做一个图文混排的页面。

 

对于这个页面,OC会咋么实现呢?思考中……,看看小程序的实现吧,看完后,你绝对有想学小程序的冲动,而且它的流畅度也不亚于原生应用,只是第一次进入时稍微慢点。直接上代码:

.wxml文件:


<view class="promise-container">
    <view class="promise-title-container">
      //goodInfo 是一个Json,存放数据
      <text class="promise-title"></text>
      <view class="promise-title-line"></view>
    </view>
   //相当于一个for循环
  <block wx:for="">
    //根据不同类型来渲染图片还是文字
    <view wx:if=""  


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23347.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询