轻松上手开发微信小程序
来源:互联网 发布:js 调用div内容 编辑:程序博客网 时间:2024/06/05 05:05
今天(2017/1/9)微信小程序终于上线了,可以说这是张小龙在微信上的又一大战略性的布局。至于微信小程序的各种特点以及简单使用,想必各位读者也跟我一样在被朋友圈刷屏之后已经有所了解。小程序的开发与传统的web前端开发极其相似,想必各位技术宅们关心的是如何去开发一个小程序,这里我简单介绍一下如何简单上手开发小程序。
第一步:安装
要开发小程序,当然需要工具了,前往微信官网下载 微信开发者工具
安装之后打开,需要通过微信扫二维码登录。
扫码登录后,选择 本地小程序项目
,点击添加项目,然后填写相关信息:
AppID: 企业申请后获得,或受邀参与内测的可以去
微信·公众平台
里查看,只是测试用的话,选择无AppID.依次填写
项目名称
和项目目录
,在第一次创建项目时,建议勾选在当前目录中创建 quick start 项目
选项。这会帮助创建一个初始的 demo。
第二步:基本配置
进入创建的初始 demo 后,可以看到如下页面:
点击编辑后,可以发现右边目录结构
中有两个文件夹以及根目录下的三个文件,三个文件分别为app.js
、app.json
、app.wxss
,以下分别介绍这三个文件的作用:
app.js
//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null }})
app.js
为脚本文件,我们可以在app.js
中监听并处理小程序的生命周期函数、声明全局变量以及调用各类提供的 API。如初始demo中调用登录接口以及获取数据。
app.json
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
该文件由两部分组成,我们可以在定义页面的路径,也可以在里面定义一些小程序的窗口背景色,配置导航条样式,配置默认标题。我们可以发现,这正好对应pages文件中的两个页面。如果我们要添加新的页面,也需要在这里先申明路径,“pages”数组中的一个页面为小程序的首页。
注意:app.json
中不能添加任何注释!!!
app.wxss
/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}
app.wxss
中定义小程序的公共样式,这里申明的样式我们可以在其他的页面中直接引用。
第三步:页面创建
前面介绍过这个初始demo中有两个页面,微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、 index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件,.wxml 后缀的文件是页面结构文件。下面一次看一下每个文件的内容:
index.wxml
<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>
index.wxml
为页面结构,相当于我们写的.html
文件,index.wxml
与.html
还是存在一些区别。我们发现上述文件中的</view>
标签与.html
中的</div>
标签很相似。其他<view/>
、<image/>
、<text/>
标签的使用与.html
中类似。
index.js
//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }})
index.js 是页面的脚本文件,与我们之前的.js
文件的功能一样。在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
index.wxss
/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}
index.wxss
为页面的样式表,类似.css
。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json
页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
第四步:调试
点击开发框左侧的调试
进入调试界面:
以下是我们用chrome进行前端开发时的调试界面(以百度为例):
天呐~又是惊人的相似,再一次说明了微信小程序开发与web前端开发的关系。调试区域分为六个部分:Wxml、Console、Sources、Network、Appdata、Storage
Wxml
这里我们可以看到真实的页面结构以及结构对应的样式,同时我们也可是对结构以及样式进行操作,并实时查看结果:
Console
与通过chrome调试一样,Console 有两大功能:开发者可以在此输入和调试代码以及当代码出错时,错误信息会显示在这里。
Sources
Sources panel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。
Network
用于观察和显示 request 和 socket 的请求情况,以及每次请求所花的时间:
Appdata
Appdata 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。
Storage
Storage 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
第五步:项目预览
开发者工具右侧的“项目”模块中包括:当前项目细节、上传以及项目的一些其他设置。
由于没有AppID
,部分功能无法使用。
- 轻松上手开发微信小程序
- 微信小程序上手指南
- 微信小程序上手指南
- 腾讯云 wafer2 上手,轻松部署小程序后端!
- iOS开发笔记--iOS之轻松上手block
- 通过SmartInvoke运用java与flex轻松构建cs程序(两分钟轻松上手)
- 轻松开发多语言程序
- The Regulator 轻松上手
- 轻松上手SpringMVC
- zookeeper轻松上手
- Altium Designer 轻松上手
- SpringMVC-轻松上手
- Scalpel轻松上手
- 轻松上手SpringMVC
- 轻松上手vim
- ecognition 分类轻松上手
- 无线局域网设置轻松上手
- iOS7设计指南:轻松上手
- 在Windows上安装、使用Git完全教程
- 压缩感知通俗解释
- 为 Ubuntu 16.04 配置 OpenCV 3.2.0
- 你真的了解left join,即左连接吗?
- ucenter 整合同步登录的内部实现原理
- 轻松上手开发微信小程序
- IDEA上面搭建一个SpringBoot的web-mvc项目
- 游戏开发中用到的几种摄像机跟随方法(1)
- Ajax向java后台中传值为数组时,后台接收不到(为null)的问题
- java-Design Pattern-设计模式分类
- python第5章学习笔记
- linux下文件的压缩及解压
- 百数谐韵咏物千字文全文释义
- 【Java】在JSP中获取绝对路径