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


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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
Postman动态获取返回值过程详解
Jun 30 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.MVC的模板标签系统(三)
2006/09/05 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
php文件上传类的分享
2017/07/06 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
python中lambda与def用法对比实例分析
2015/04/30 Python
10个Python小技巧你值得拥有
2018/09/29 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python如何将图片转换素描画
2020/09/08 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
女性时尚网购:Chic Me
2019/07/30 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
技术总监管理职责范本
2014/03/06 职场文书
安全环保演讲稿
2014/08/28 职场文书
计生个人工作总结
2015/02/28 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL