小程序和webapp
2017-01-15 13:12:34 qq_20288133 阅读数 3903

微信小程序和WebApp有什么区别?

-威震天

  • 1.开发方式:

    开发语言和开发感觉方面类似,微信小程序自己的js-sdk也是类似vue和ng的mvvm思想来写。webapp如ionic是基于ng的所有有很多ng插件,但是微信小程序是自己渲染引擎不支持第三方插件。坐等官方更新。这点限制了小程序扩展当然本事小程序主题就不应该庞大,所以jquery是完全不可以使用的。

  • 2.呈现方式:

    微信小程序是通过微信二维码进入或者自己去微信搜(暂时没有完善商店),而webapp如ionic要打包成android,ios和wf的可执行程序放在商店下载。ui使用方面webapp可以和原生很接近。小程序还是差得远,只能当原生的轻应用来使用一部分功能,对于只想一部分功能人不用下载app。

  • 3.发布方面:

    webapp如ionic可以自己开发挂商店玩,weapp小程序暂时只能公司申请一年300的用(防止泛滥)。

  • 4.IDE方面:

    webapp如ionic可以随意使用流行的文本编辑器vscode,atom还是sublime都可以,而小程序自己的IDE不能设置背景坑白色开发多难过。虽然有大神第三方加插件改成,但是官方应该升级一下满足黑色程序员。

  • 5.未来发展:

    本人大四入门菜鸟这个不好说,毕竟h5跨平台也有很多坑。webapp如ionic通过cordova可以操作手机硬件,小程序通过自己引擎可以操作手机硬件。但是多多少少打击到了原生移动端开发者。

妾身让人舒服不可取代正宫。

小程序和webapp 相关内容

2013-08-02 15:43:41 cranedingNO1 阅读数 23
[size=medium]webkit内核的手机浏览器meta标签对webapp的作用[/size]


<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />

[list]
[*][size=medium]第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。[/size]
[*][size=medium]第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;[/size]
[*][size=medium]第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;[/size]
[*][size=medium]第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码[/size]
[/list]


<meta content="email=no" name="format-detection" />

[list]
[*][size=medium]去除Android平台中对邮箱地址的识别[/size]
[/list]


setTimeout(scrollTo,0,0,0);

[list]
[*][size=medium]去除iOS和Android中的输入URL的控件条
[/size][/list]

[quote][size=medium]以上的小知识是参考[url]http://www.cnblogs.com/leizhenzi/archive/2011/07/23/2114963.html[/url][/size][/quote]

小程序和webapp 相关内容

2017-08-09 10:46:02 luck332 阅读数 21064

DIY官网在线设计后台数据源及前台展示,设计完成后支持一键导出小程序,WebApp及后台管理,导出后台后解压到服务器后安装应用,安装完成后即可使用。源码只需要20000元。

官方网站:http://www.diygw.com

后台下载

大家前往GITHUB下载源码https://github.com/html580/diygw。下载完源码后解压到你的部署目录下。

 

 

系统安装

浏览器端输入你域名,如果系统没有安装,会自动转到安装地址。我已我自己的域名为例。

输入域名https://xcx.diygw.com/。系统自动转向到https://xcx.diygw.com/public/install.php

第一步:点击同意安装协议

 

第二步:环境检测

大家检测下自己的环境,如果环境提供有误,请修复对应的错误

 

第二步:创建数据库

大家根据自己的数据库来配置,建议独立数据库。输入创始人的账号信息,记得要保存好自己的用户名密码信息哟。

 

安装完后登录后台应用,可以对数据进行管理


制作应用

第一步:点击新建微信小程序/WEBAPP

点击后弹出窗口,输入你的应用名称。下面以首页我的例子我的电商首页展示为例。


首页主要包括:图片切换,分类导航,内容展示,底部导航

大家想到这里就会想到数据来源呢,对的。那我们就进入后台数据源管理


进入后我们第一步想到的是有图片切换,分类,详情三个表单。

 

数据源管理

图片切换表单


 

详情表单

其他表单可能都差不多,其中详情表单可能会稍有不同,他有可能会涉及到分类。

 


大家每做完一个表单都可以在线预览然后增加几条数据,用于前台展示。

 

新增表单有了大家肯定想到了我怎么数据管理呢?现在教大家怎么进行数据管理。

大家可能在设计的过程如果没注意表单的设置,显示的是表单。

 

数据管理的时候,大家可能要编辑数据,对表格有个细节需要注意,在编辑页面选项值里选择对应的表单。

至此后台数据源完成,我们回到前台的设计。

 

 

手机端设计

图片切换设计

拖拉滑块组件进入设计区,设置数据源,进行数据源管理

 



分类展示

拖拉九宫组件进入设计区,设置数据源及字段映射。字段映射用于分类详情展示,跳转到分类时对过滤出对应的数据。

 




内容展示

内容展示跟图片切换一样,只需要拖拉对应的位置即可。


 

导出后台

制作完成后,大家可以点击导出后台,设置一些必要的参数值。如果你只是想做WebApp,参数可以默认就行,无需要修改






 

 

后台下载

大家前往GITHUB下载源码https://github.com/html580/diygw。下载完源码后解压到你的部署目录下。

 

 

系统安装

浏览器端输入你域名,如果系统没有安装,会自动转到安装地址。我已我自己的域名为例。

输入域名https://xcx.diygw.com/。系统自动转向到https://xcx.diygw.com/public/install.php

第一步:点击同意安装协议

 

第二步:环境检测

大家检测下自己的环境,如果环境提供有误,请修复对应的错误

 

第二步:创建数据库

大家根据自己的数据库来配置,建议独立数据库。输入创始人的账号信息,记得要保存好自己的用户名密码信息哟。

 

安装完后登录后台应用,可以对数据进行管理


制作应用

第一步:点击新建微信小程序/WEBAPP

点击后弹出窗口,输入你的应用名称。下面以首页我的例子我的电商首页展示为例。


首页主要包括:图片切换,分类导航,内容展示,底部导航

大家想到这里就会想到数据来源呢,对的。那我们就进入后台数据源管理


进入后我们第一步想到的是有图片切换,分类,详情三个表单。

 

数据源管理

图片切换表单


 

详情表单

其他表单可能都差不多,其中详情表单可能会稍有不同,他有可能会涉及到分类。

 


大家每做完一个表单都可以在线预览然后增加几条数据,用于前台展示。

 

新增表单有了大家肯定想到了我怎么数据管理呢?现在教大家怎么进行数据管理。

大家可能在设计的过程如果没注意表单的设置,显示的是表单。

 

数据管理的时候,大家可能要编辑数据,对表格有个细节需要注意,在编辑页面选项值里选择对应的表单。

至此后台数据源完成,我们回到前台的设计。

 

 

手机端设计

图片切换设计

拖拉滑块组件进入设计区,设置数据源,进行数据源管理

 



分类展示

拖拉九宫组件进入设计区,设置数据源及字段映射。字段映射用于分类详情展示,跳转到分类时对过滤出对应的数据。

 




内容展示

内容展示跟图片切换一样,只需要拖拉对应的位置即可。


 

导出后台

制作完成后,大家可以点击导出后台,设置一些必要的参数值。如果你只是想做WebApp,参数可以默认就行,无需要修改






 

 

小程序和webapp 相关内容

2018-07-19 23:38:36 weixin_34194379 阅读数 5

初始化wepy项目

# wepy init standard <项目名>
wepy init standard wepy-iview

输出如上图所示,则创建项目成功

安装依赖包

进入项目根目录,命令行执行 npm install命令进行安装依赖包

# 进入目录
cd wepy-iview/

# 执行安装命令
npm install
笔者使用的是mac os系统,需要给目录权限,不然npm install时各种权限报错

添加iview ui

iview webapp官网: https://weapp.iviewui.com/docs/guide/start
iview webapp gihub: https://github.com/TalkingData/iview-weapp

首先到 iview webapp github下载最新的开源代码(主要是src目录下的文件)

笔者将会演示引入 iview 的 modal样式,具体操作步骤请看下方:

  1. 在项目中创建ui目录,方便区分管理
  2. 到官方的开源代码里,拷贝src目录下的 styles目录和base到 项目 ui目录中
  3. 到官方的开源代码里,拷贝src目录下的modal目录到 项目ui目录中
  4. 查看modal需要依赖的组件,并把相关的组件都拷贝到 项目的 ui目录中,最后如下图所示

使用 modal 组件

修改项目pages目录下的index.wpy

  1. config引入组件

    usingComponents: {
        'i-modal': '../resources/ui/modal/index'
    }
  2. 添加视图代码

    <i-modal title="标题" visible="{{ true }}" show-ok="{{true}}" ok-text="好样的" show-cancel="{{false}}">
      <view>已经成功引用了iview样式</view>
    </i-modal>

构建dist目录及小程序开发工具预览效果

  1. 在项目根目录执行命令构建dist目录

    wepy build --no-cache
  2. 小程序开发工具新建项目并选择构建出来的dist目录
  3. 最终效果

小程序和webapp 相关内容

2016-09-22 15:31:00 weixin_33742618 阅读数 3

       应用号以“微信公众平台小程序”的名义进行内测发布,核心功能是提供一些本地的API供H5上面的js调用,以此提升微信上H5应用的流畅度。

        从内测信息来看,小程序在通过向开发者开放多种服务及支撑能力以实现以上设想,主要面向开发者,这些服务和支撑能力包括:

视图容器:视图(View)、滚动视图、Swiper
基础内容:图标、文本、进度条
表单组件:按钮、表单等等
操作反馈
导航
媒体组件:音频、图片、视频
地图位置服务
画布
文件操作能力
网络:上传下载能力、WebSocket
数据:数据缓存能力
位置:获取位置、查看位置
设备:网络状态、系统信息、重力感应、罗盘
界面:设置导航条、导航、动画、绘图等等
开放接口:登录,包括签名加密,用户信息、微信支付、模板消息

        可以对比Cordova/Phonegap的常用接口

电池状态
摄像头
控制台
联系人
设备
设备体感
设备屏幕方向
对话框
文件
文件传输
地理位置
多语言
内置浏览器
多媒体播放和记录
网络状态
闪屏
震动
状态栏
网络请求白名单
输入键盘

总体来说这次开放的接口相对Cordova 或者React-native能够提供的原生接口相对较少。不过提供了和微信平台的接口支持。

        对微信小程序开发者的一点小建议,JS从幼儿园期的无模块模式,到jquery的匿名函数,到Extjs的模块化,到node的模块管理,前端的Requirejs管理,再到以Angular,React为代表的现代JS框架。所以建议开发者使用模块化管理微信小程序的代码,可以使用Angular,React来做开发。这样既能保证代码的规范,也能方便的使用cordova,react native将项目转化为App 。

        虽然还未收到微信小程序的内测邀请,还是提出对微信小程序的一点希望。

        1、提供本地前端代码的本地存储支持,这将极大提高web app的体验。

        2、提供更丰富的原生接口,可以为开发者提供更多的可能性。

        3、对个人开发者更加友好。

 

---------华丽的分割线 20160925更新---------

微信官方公布了教程和demo

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

看完教程可以发现,微信小程序的框架是个angular和react的结合体。

既有数据绑定又有组件的概念,不过官方文档也说明了因为不提供window对象所依不兼容jquery和vue。

不过不得不吐槽一下官方的demo,this that变量是闹哪套啊。参照angualr的scope多好。

转载于:https://my.oschina.net/u/186935/blog/750207

小程序和webapp 相关内容

没有更多推荐了,返回首页