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


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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
Puppet的一些技巧
2018/09/17 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
前端性能优化建议
2020/09/17 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
深入探究HTML5的History API
2015/07/09 HTML / CSS
法学专业个人求职信
2013/09/26 职场文书
2014年文员工作总结
2014/11/18 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android