微信小程序实战教程——1.基础知识
|
微信小程序的语法与vueJS类似，没学过vueJS的同学尽量先过一遍vue再看本教程。 首先在微信平台中注册一个账号获得开发者AppID，如下载微信小程序的开发者工具，安装完毕后打开开发者工具创建一个项目，将项目名称位置AppID填入即可。
2 文件目录及每个文件的功能
微信小程序的文件有四类，分别是.wxml文件，.wxss文件，.js文件，.json文件。 其中.wxml对应.html文件，.wxss文件对应.css文件，.json文件是配置文件。 pages文件夹中每一个文件夹代表一个页面，新建的项目有两个页面，分别四index和logs页面，每个页面包含一个.js文件，一个.wxml文件，一个.wxss文件以及一个.json文件。四类文件的作用稍后会讲到。 utils文件存放的是工具类，这个文件夹是非必须的，可以直接删掉。 project.config.json与sitemap.json初学者可以暂时不理会。 2.1 .wxml文件.wxml文件类似我们写的.html文件，但标签上有些不同。 使用<view></view>标签代替<div></div>，使用<image></image>代替<img/>，使用<block></block>标签代替<template></template>，引入<text></text>标签等等，后续做项目的时候会了解到更多标签。 <!--新建项目的index.wxml文件-->
<view class="container">
<"userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src={{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<"usermotto">
<"user-motto">{{motto}}</text>
</view>
</view>
复制代码
2.2 .wxss文件.wxss文件就是.css文件。在app.wxss中控制全局样式，在pages文件夹中的页面文件的.wxss文件中控制局部样式。局部样式的优先级大于全局样式。 微信小程序推荐的布局方式是弹性布局（?弹性布局快速入门点这里?）,使用弹性布局可以很快速的搭建我们的项目。 微信小程序为了适配多种不同屏幕大小的设备，采取了一种的响应式单位rpx，使用rpx单位就好像使用百分比作为单位一样实现响应式布局。rpx是一种相对大小，我们使用iphone6的机型时，1px=2rpx，iphone6的大小为375px*667px，对于的rpx为750rpx*1334rpx。关于rpx的更多了解见wxss.html#尺寸单位 2.3 .json文件.json文件是项目的配置文件 //-新建项目的app.json文件
{
"pages": [
"pages/index/index","pages/logs/logs"
],0);">"window": {
"backgroundTextStyle": "light",0);">"navigationBarBackgroundColor": "#fff",0);">"navigationBarTitleText": "WeChat",0);">"navigationBarTextStyle": "black"
},0);">"sitemapLocation": "sitemap.json"
}
复制代码
pages是存放所有页面的数组,每一个使用到的页面都需要写入pages内，不需要写文件后缀，window属性配置的是状态栏的样式，如navigationBarBackgroundColor用于设置背景色，navigationBarTitleText设置状态栏显示的文本，navigationBarTextStyle设置状态栏文本的颜色，只能传入black/white，除此之外还可以配置底部导航栏tabBar等等。 app.json文件进行全局配置，每个页面文件夹下还有一个.json文件用于局部配置，局部配置只能配置window属性 //局部配置.json文件,这里的配置会覆盖app.json中的window属性
{
"black"
}
复制代码
注意事项
2.4.js文件小程序的生命周期分为应用声明周期和页面生命周期，应用声明周期函数在app.js中定义，且在小程序运行过程中一直存在内存中处于运行状态，在这里可以定义应用声明周期函数以及定义全局变量。每个页面中的.js文件中则可以定义页面声明周期函数等，语法类似vueJS。 小程序为了提高性能，是不允许开发者操作DOM元素的。 //新建项目的app.js文件，通过App方法声明
App({
onLaunch: function () {
//页面渲染前执行
},globalData: {
//定义全局变量
userInfo: null
}
});
//页面的.js文件，通过Page方法声明
Page({
});
复制代码
3 指令小程序中常用的指令有wx:for、wx:if、wx:elif、wx:else等。 //wxml
<view>
<text wx:if="count>0">{{count}}</text>
<text wx:elif="count<0">text wx:else>text>
</view>
//js
data() {
return {
count:0
}
}
复制代码
wx:if、wx:elif、wx:else的逻辑等同于if else。 //wxml
<view>
<text wx:for="arr" wx:for-item="value" wx:for-index="index">
{{index}}.{{value}}
</text>
</view>
//js
data() {
return {
arr:[
'小明',0);">'小红',0);">'李雷'
]
}
}
输出===>
<view>
<text>1.小明</text>
2.小红</text>
3.李雷</text>
</view>
复制代码
wx:for即循环生成标签。 4 事件小程序中不使用click事件，而用tab（触摸）事件代替，事件的前缀有两种分别是bind和catch，bind:tab表示冒泡事件，即事件触发后继续冒泡触发后续事件，catch:tab表示非冒泡事件，即事件触发后不再冒泡，类似执行了event.stopPropagation()方法。 改变data中的属性值必须使用this.setData()方法，传入一个对象，对象中存放需要改变的属性键值对。
|
