[Wondgirl] 微信小程序(一)简介
来源:互联网 发布:高晓松 阿里 知乎 编辑:程序博客网 时间:2024/06/15 07:29
什么是微信小程序:
小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
微信小程序官网(微信公众平台): https://mp.weixin.qq.com/
微信小程序开发文档
微信开发者工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122
微信开发者工具的使用
1.安装好微信开发者工具后,点击打开.
2.用手机的微信扫一扫扫码登陆.
3.选择本地项目:
4.添加项目
5.添写项目名称,选择存放目录
6.进到主届面,我们可以添加修改删除自己目录或文件.
每个文件更改后都要按command+s保存再进行编译.
调试—Console:打印log
调试—Sources:源码
调试—Network:网络
调试—Storage:缓存(本地数据库) 可以点击左边栏的缓存按钮清除缓存.
调试—AppData:程序的数据.
左边栏后台按钮,模拟小程序在后台运行.
导入已有项目
项目目录选择你要导入的项目即可.项目名称可以写成和要导入项目的名称一样.也可以不一样.
目录结构
编辑—app.json
pages数组里面是页面的路径,对应的是pages里面的文件夹,一个文件夹是一个页面.
每个页面必须包含一个 .js 文件 和一个 .wxml文件.
.js文件配制页面的入口.
.wxml文件配制布局与UI
.json是页面的配置文件
.wxss是页面的样式文件
{ "pages":[//页面:是个数组(这里对应的两个页面. "pages/index/index",//index页面的路径 "pages/logs/logs"//logs页面的路径 ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
创建一个空的项目
不要勾选下方的复选框.
一.新建App.json文件
二.新建src源码目录.
1.在src目录下新建页面pages目录
2.在pages目录下新建index目录.
3.在index目录下新建页面index.js和index.wxml
三.新建app.js文件
四.我们在页面的布局.wxml文件中输入要显示的内容
五.在页面入口index.js中输入(页面的配制)
Page({ data:{ }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})
在程序入口app.js中输入
App({ onLaunch: function () { console.log('App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') }})
在app.json中输入(程序的配制)
{ "pages": [ "src/pages/index/index" ]}
- [Wondgirl] 微信小程序(一)简介
- [Wondgirl] 微信小程序(四)事件
- [Wondgirl] 微信小程序(五)生命周期
- [Wondgirl] 微信小程序(二)视图渲染
- [Wondgirl] 微信小程序(三)模板的使用
- [Wondgirl]ECMAScript6(ES6)(一)
- 微信小程序之简介(一)
- [Wondgirl]从零开始学React Native之环境搭建(一)
- 微信小程序简介
- 微信小程序开发简介
- [Wondgirl] iOS-日历
- [Wondgirl] iOS-版本更新
- [Wondgirl] iOS数组排序
- 微信小程序开发(1)---简介
- Python:程序发布方式简介一(打包为可执行文件EXE)
- [Wondgirl]XCode8 xib 的坑
- 微信小程序(一)
- 微信小程序调查报告(一)
- 20. Valid Parentheses--合法的括号组合(使用stack)
- 一个相对较难需求的实现
- 排序算法——快速排序详解(java实现)
- zookeeper应用陷阱
- N阶楼梯-计数
- [Wondgirl] 微信小程序(一)简介
- Tesseract:安装与命令行使用
- 文章中的代码添加语法高亮
- 汉字的unicode编码最小值
- thinkphp——上传图片
- Extjs 实现menu居中效果(仿弹窗)
- 网络虚拟化中的 offload 技术:LSO/LRO、GSO/GRO、TSO/UFO、VXLAN
- 连接池 druid(阿里巴巴的框架)
- Abandoned Object Detection via Temporal Consistency Modeling and Back-Tracing Verification for Visua