开发前的准备:
先把 微信开发者工具 下载了,具体百度全都有。
(1)有人说,会Vue小程序根本不用学:微信小程序虽然是腾讯自己搞的,但是核心的西乡跟Vue等框架是一样的。
(2)善于搜集精美的小组件,:“我们不生产代码,我们只是代码的搬运工,”善于找到自己想要的然后学习组装成自己一个大项目,可以学到很多只是。具体上Github搜索,全都有。
(一)生成结构
首先是代码的构成,分为四个模板。1.Json配置 2.WXML模板(相当于Html)3.WXSS样式(相当于Css)3.JS逻辑交互。
看看他们分别的作用。
(1)Json配置
根目录有一个app.json和project.config.json,此外在 page/logs目录下还有一个logs.json。
app.json是对小程序的全局配置,包括小程序的所有页面的路径,界面的表现,网络超时的时间,底部的Tab。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
pages是小程序所有页面的路径。
window是定义小程序顶部和底部等其他样式。
文件名不需要写文件后缀,因为框架会自动去寻找路径下 .json
, .js
, .wxml
, .wxss
四个文件进行整合。
具体window属性请参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html点击打开链接
project.config.json
是一个自定义配置,所有样式和配置都在这里面,当你换电脑的时候可以载入这个配置代码包。
(2)WXML模板
跟html一样,也是采用html+css+js实现。
当你打开page/index/index.wxml页面时,你会看到以下代码:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
只是标签名和属性变换了而已,多了一些类似Vue里面一些判断属性的表达式,简单来说这种MVVM的开发模式,就是把渲染和逻辑分离,不要让JS直接操作DOM,JS只要管理就好,然后再通过一种模板语法来描述状态和界面结构的关系。
举个例子:
wxml直接这样写
<text>{{msg}}</text>
JS通过管理状态这样写:
Page({
data: {
msg: 'Hello !'
}
})
通过{{}}语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不能完整的描述状态和界面的关系,加上一些if/else,for等控制力。
具体请查看 点击打开链接
(3)WXSS样式
跟css之类的类似,新增了尺寸单位,因为是移动端开发,会有不同宽度和设备像素比,wxss加了rpx为新单位,免去了换算的烦恼,由于采用了浮点数运算,还有有一点的偏差。提供了全局样式和局部样式。此外仅支持部分css选择器。
(4)JS的交互逻辑
仅仅一个界面是不够的,还要响应用户,做下交互,获取当前位置等等。
举个例子:
在wxml这样写:
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
在js中这样写:
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
此外,小程序中还提供了丰富的API,在默认程序中,就举了一个例子:
通过pages/index/index.js 调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后 setData 把获取到的信息显示到界面上。
wxml:
<!--wxml-->
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
}
})
详情请查看
点击打开链接
结束:2018.6.29 2:16