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


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
Jan 21 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
如何提高数据访问速度
Dec 26 Javascript
js中作用域的实例解析
Mar 16 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
vue slots 组件的组合/分发实例
Sep 06 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 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
摩卡咖啡
2021/03/03 咖啡文化
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php按单词截取字符串的方法
2015/04/07 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
javascript页面加载完执行事件代码
2014/02/11 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
拉贝日记观后感
2015/06/05 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
仰望星空观后感
2015/06/10 职场文书
领导欢送会主持词
2015/07/06 职场文书
运动员入场前导词
2015/07/20 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers
移除Selenium中window.navigator.webdriver值
2022/06/10 Python