微信小程序(应用号)简单实例应用及实例详解


Posted in Javascript onSeptember 26, 2016

Demo 预览

微信小程序(应用号)简单实例应用及实例详解

演示视频(流量预警 2.64MB)

GitHub Repo 地址

仓库地址:https://github.com/zce/weapp-demo

使用步骤

将仓库克隆到本地:

bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban

打开微信Web开放者工具(注意:必须是0.9.092300版本)

必须是0.9.092300版本,之前的版本不能保证正常运行

不需要所谓的破解,网上所谓的破解只是针对之前的0.9.092100版本,新的官方版本不需要破解,不需要破解,不需要破解!

下载链接(官方版本,放心下载):https://pan.baidu.com/s/1qYld6Vi

wechat_web_devtools_0.9.092300_x64.exe(Windows 64位)
wechat_web_devtools_0.9.092300_ia32.exe(Windows 32位)
wechat_web_devtools_0.9.092300.dmg(macOS)

1.选择添加项目,填写或选择相应信息

AppID:点击右下角无AppID(我也没有资格,据说这次200个名额是小龙钦点的)
项目名称:随便填写,因为不涉及到部署,所以无所谓
项目目录:选择刚刚克隆的文件夹
点击添加项目

微信小程序(应用号)简单实例应用及实例详解

新年快乐,恭喜发财

微信小程序(应用号)简单实例应用及实例详解

你可以选择在微信Web开放者工具中编码(也可选择你喜欢的编辑器)

微信小程序(应用号)简单实例应用及实例详解

1.通过左下角重启按钮,刷新编码过后的预览

2.Bash用户可以通过在项目目录下执行以下命令快速创建新组件所需文件:

bash $ ./generate page <new-page-name> # or $ ./generate component <new-component-name>

剩下的可以自由发挥了

微信小程序基本教程(持续更新)

创建一个项目文件夹,创建基本所需文件

app.js

项目主入口文件(用于创建应用程序对象)

// App函数是一个全局函数,用于创建应用程序对象
App({
 // ========== 全局数据对象(整个应用程序共享) ==========
 globalData: { ... },

 // ========== 应用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 应用程序启动时触发一次
 onLaunch () { ... },

 // 当应用程序进入前台显示状态时触发
 onShow () { ... },

 // 当应用程序进入后台状态时触发
 onHide () { ... }
})

app.json

项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)

{
 // 当前程序是由哪些页面组成的(第一项默认为初始页面)
 // 所有使用到的组件或页面都必须在此体现
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
 "pages": [ ... ],
 // 应用程序窗口设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
 "window": { ... },
 // 应用导航栏设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
 "tabBar": { ... },
 // 网络超时设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制台输出调试信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}

app.wxss

[!可选!]项目全局的样式文件,内容遵循CSS标准语法

创建页面组件

每个页面组件也分为四个文件组成:

  1. page-name.js
  2. 页面逻辑文件,用于处理页面生命周期控制和数据处理
  3. 未完待续...
  4. page-name.json
  5. 设置当前页面工作时的一些配置
  6. 此处可以覆盖app.json中的window设置
  7. 也就是说只可以设置window中设置的熟悉
  8. 未完待续...
  9. page-name.wxml
  10. wxml指的是Wei Xin Markup Language
  11. 用于定义页面中元素结构的
  12. 语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法
  13. 未完待续...
  14. page-name.wxss
  15. wxml指的是Wei Xin Style Sheet
  16. 用于定义页面样式的
  17. 语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)

通过此文希望能帮助大家学习掌握微信小程序的开发,谢谢大家对本站的支持!

Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
JS数组的赋值介绍
Mar 10 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
JavaScript实例 ODO List分析
Jan 22 Javascript
微信小程序 框架详解及实例应用
Sep 26 #Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 #Javascript
javascript的函数劫持浅析
Sep 26 #Javascript
JavaScript中this的四个绑定规则总结
Sep 26 #Javascript
jQuery 选择器(61种)整理总结
Sep 26 #Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 #Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 #Javascript
You might like
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
使用graphics.py实现2048小游戏
2015/03/10 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
python实现换位加密算法的示例
2018/10/14 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python 读取数据库并绘图的实例
2019/12/03 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
几道数据库的概念性面试题
2014/05/30 面试题
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
初中三年毕业生的自我评价分享
2014/02/14 职场文书
机电一体化专业求职信
2014/07/22 职场文书
如何写好开幕词?
2019/06/24 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python