微信小程序试水

来源:互联网 发布:初学者mint和ubuntu 编辑:程序博客网 时间:2024/06/10 17:07

去年火了小程序。我也试试吧。

什么小程序

微信小程序是运行在微信内部的一个应用
微信小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。


优点

  • 可以通过扫码或朋友推荐获取
  • 无需安装,直接使用
  • 即点即用,用完即走
  • 开发方便
  • 开发成本低

缺点

  • 入口少,推广不便
    (1)二维码
    (2)好友推荐

  • 用户体验不够好

  • 开发环境不友好

  • 不适合复杂应用

  • 变现能力未知
    |


小程序结构

这里写图片描述

主体部分

一个小程序主体部分由三个文件组成,必须放在项目的根目录
- app.js 小程序逻辑 (必须)
- app.json 小程序公共设置 (必须)
- app.wxss 小程序公共样式表(可选)

页面部分

一个小程序页面由四个文件组成,分别是:
- js 页面逻辑(必须)
- wxml 页面结构(必须)
- json 页面配置 (可选)
- wxss 页面样式表(可选)
: 参考资料
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html


学习资料

  • 官方网站:

    • 框架
    • 组件
    • API
    • 工具
    • 讨论
  • 其他:

  • http://www.jianshu.com/p/45e41cdf6706

如何开发小程序?

准备工作:

注册小程序账号(不必须)

目前微信小程序的账户并没有对个人用户开放,但是还好微信的开发工具不要求是小程序的注册用户,也就是随便哪个人都可以使用工具进行开发测试,所以即使不注册账户也可以学习小程序。
注册和不注册的区别
注册:拥有小程序ID(AppID),可以连接真机测试
不注册:没有小程序ID,只能在本地虚拟机测试
注册地址:(我就没有注册)
https://mp.weixin.qq.com/

安装小程序的开发工具

下载后,打开使用手机扫一下微信登陆开发
下载地址:
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1487220581

例子:导入项目

1,添加项目

这里写图片描述

2,选择开发的好的项目的路径,进行导入

这里写图片描述

3,导入成功

这里写图片描述

例子:开发新的程序

目录:
这里写图片描述

1,新建项目
这里写图片描述
2,新建一个空的项目
这里写图片描述
3,依次建立相关文件
这里写图片描述
这里写图片描述
4,代码
app.json

{    "pages": [        "pages/index/index",        "pages/hello/hello"    ],    "window": {        "navigationBarBackgroundColor": "#000",        "navigationBarTextStyle": "white",        "navigationBarTitleText": "hello  world",        "backgroundColor": "#000"    },    "tabBar": {        "list": [            {                "pagePath": "pages/index/index",                "text": "主页"            },            {                "pagePath": "pages/hello/hello",                "text": "你好"            }        ]    }}

保存之后,会自动出现hello 和index文件夹。如果没有的话自己新建一下。

index.wxml

<!--pages/index/index.wxml--><text>这是我的第一个小程序</text>

hello.wxml

<!--pages/hello/hello.wxml--><text>hello world</text>

5,运行情况

这里写图片描述

小结

认识一下我们现在使用的小程序。使用很便捷,理念很时尚,程序开发也很简单。

0 0
原创粉丝点击