1、小程序结构目录
2、全局配置文件
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。
2-1、pages字段
在这个app.json文件的pages第一个放置的就是第一个页面，并且可以在这里快速创建页面。
pages字段——用于描述当前小程序的所有页面路径
2-2、window字段（页面配置）
window字段——定义小程序所有页面顶部背景颜色、文字颜色定义等。
常用的解释：
| 属性 | 类型 | 默认值 | 描述 | 截图 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |  |
| navigationBarTitleText | string | weixin | 导航栏标题文字内容 |  |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black / white | 如上 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light，但是这个必须和 enablePullDownRefresh的值必须设置为true |  |
| enablePullDownRefresh | boolean | false | 是否开启当前页面刷新 | 如上 |
想了解更多：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
2-3、tabbar字段
底部 tab 栏的表现，如下图：
这个tabbar是和pages，window同级别的（输入tabbar就会自动生成一些代码）
附上代码截图，加以解释：
1）list字段（重点）
| 属性 | 类型 | 说明 |
| pagePath | String | 页面路径，必须在 pages 中先定义 |
| text | String | tab按钮上的文字内容 |
| iconPath | String | 图片路径，icon 大小限制为 40kb（没有选中的图片路径） |
| selectedIconPath | String | 选中时的图片路径，icon 大小限制为 40kb （选中的图片路径） |
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。
2）其他字段
| 属性 | 类型 | 描述 |
| color | HexColor | tab 上的文字默认颜色，仅支持十六进制颜色。 |
| selectedColor | HexColor | tab 上的文字选中时的颜色，仅支持十六进制颜色。 |
| backgroundColor | HexColor | tab 的背景色，仅支持十六进制颜色。 |
| borderStyle | string | tabbar 上边框的颜色， 仅支持 black / white |
| position | String | tabBar 的位置，仅支持 bottom / top |
3、小程序开发三剑客
wxml+wxss+js
wxml：用来布局组件，类似html
wxss：显示样式，类似css
js：用来处理逻辑，什么功能的
4、小程序文件和传统web对比
| 结构 | 小程序 | 传统web |
|---|---|---|
| 结构布局 | Wxml | html |
| 样式 | Wxss | css |
| 逻辑 | JavaScript | JavaScript |
| 配置 | Json | 无 |
5、新建页面的快捷键
点击app.json，添加相应的页面路径，如"pages/main/main","保存就会自动生成一个页面文件（在pages目录下生成一个main文件）
6、页面配置文件
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置，页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
下面的在window字段中可以使用的都可以使用。
| 属性 | 类型 | 默认值 | 描述 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTitleText | string | weixin | 导航栏标题文字内容 |
| navigationBarTextStyle | String | white | 导航栏标题颜色，仅支持 black / white |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark / light，但是这个必须和 enablePullDownRefresh的值必须设置为true |
| enablePullDownRefresh | boolean | false | 是否开启当前页面刷新 |
想了解更多：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
配置示例
7、sitemap配置
用于配置小程序及其页面是否允许被微信索引。
微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。
8、小程序常见组件的学习
8.1、view组件
view组件：相当于一个盒子，可以用来装一些别的组件，类似当初学习html的div标签。
<view>
<view>你好呀</view>
<view>Hello world</view>
</view>| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
<view hover-class='hover_list'>
1233
</view>
//css
.hover_list {
opacity: 0.9;
background: #f7f7f7;
}8.2、text组件
text组件：主要显示文本的，是不会换行的。
<view>
<text>哈哈哈哈哈</text>
<text>你好，欢迎来到微信小程序世界</text>
</view>文本是否可以长按复制：
<text selectable="true">123333</text>
8.3、input组件（重要）
input组件：主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册时会用到。
| 属性 | 类型 | 默认值 | 说明 | 截图演示 | ||||||||||
| value | String | 输入框的初始内容 |   | |||||||||||
| type | String | text | input的类型 比如数字输入键盘，还是可以输入非数字的 在真机上测试可以知道，当数字输入键盘时，会自动弹出数字输入键盘
|   | ||||||||||
| password | boolean | false | 是否是密码类型 |   | ||||||||||
| placeholder | String | 输入框为空时占位符，（输入时会自动消失） |   | |||||||||||
| placeholder-style | String | 指定placeholder的样式 |   | |||||||||||
| placeholder-class | String | 指定placeholder的类样式 |   | |||||||||||
| disabled | boolean | false | 是否禁用，true就禁用，则无法输入 |  |
其他的请参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
8.4、button组件
button 组件：是按钮组件，自带默认的按钮效果。
| 属性 | 类型 | 默认值 | 说明 | 截图演示 | ||||||||
| type | String | default
| 按钮的样式类型 |   | ||||||||
| size | String | default
| 按钮大小 |   | ||||||||
| plain | boolean | false | 按钮是否为镂空，背景色透明 |   | ||||||||
| disabled | boolean | false | 按钮是否禁用 |   | ||||||||
| loading | boolean | false | 名称前是否带 loading 图标 |   |
其他的请参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
9、函数和事件的学习
9-1、函数的两种创建方式
函数都是定义在xx.js文件中的，并且在js文件中，都包含在Page({
})这里面的
如图所以：
第一种：
函数名：function(){
//函数执行内容
}
第二种：
函数名(){
//函数执行内容
}
注意没有函数之间都需要使用英文的逗号隔开
9-2、点击事件
当点击按钮时，控制台就是输出 dosome方法执行了
9-3、获取用户输入的信息
<input type="text" placeholder="请输入" bindinput="inputMessage"/>
<button bindtap="getMessage">点击获取内容</button>
<text wx:if="{{isTrue}}">{{msg}}</text>
// pages/study/study.js
Page({
data: {
msg:"",
isTrue:false
},
inputMessage:function(e){
this.setData({
msg:e.detail.value,
isTrue:false
})
},
getMessage:function(e){
this.setData({
isTrue:true
})
}
})
10、全局变量和局部变量
局部变量：变量在函数内声明，只能在函数内部访问。
全局变量：变量在函数外定义，整个代码都可以调用的变量。
11、数据类型
11-1、常见的数据类型
数据类型可以分成下面两大类：
- 简单数据类型(Number String Boolean Undefined Null)
- 复杂数据类型(Object)
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
11-2、转换为数字型（重点）
| 方式 | 说明 | 案例 |
| Number() | 把字符串转换为数字 | Number("22") |
| parseFloat() | 解析字符串并返回一个浮点数 | parseFloat("2.1") |
| parseInt() | 解析字符串并返回一个整数 | parseInt("11") |
12、数组的学习
12-1、创建数组的两种方式：
- 使用new创建数组
var userNames = new Array()；
- 利用数组字面量创建数组 （常用)
var userNames= ["小王","小叶","小万"]
12-2、获取数组元素
我们获取数组元素是通过数组下标来获取的，下标也叫做索引，数组的下标是从0开始的
userNames[0]的值就是小王
12-3、数组添加新元素
push() 方法可向数组的末尾添加一个或多个元素
var userNames= ["小王","小叶","小万"]
userNames.push("小贾")
userNames.push("小姚“,"小徐"）
console.log(userNames)// ["小王","小叶","小万","小贾","小姚","小徐"]
12-4、添加和删除数组元素
- push方法添加
在数组的末尾添加一个或者多个元素 - unshift方法添加
在数组的开头添加一个或者多个元素 - pop方法删除
删除数组尾部的元素，一次只能删除一个 - shift方法删除
删除数组最前面（头部）的元素
13、微信授权
1）重新认识button组件
了解更多：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
button的open-type属性：
样式代码：
<view wx:if="{{isTrue}}">
<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
</view>这里的bindgetuserinfo定义如下：
js代码中打印输出：
代码演示：
<view wx:if="{{isTrue}}">
<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
</view>
<!-- <button open-type="getPhoneNumber" bindgetphonenumber="getphone">获取电话号码</button> -->
<view>
<image src="{{userInfo.avatarUrl}}"/>
<text>{{userInfo.nickName}}</text>
<text>{{userInfo.city}}</text>
</view>js代码：
Page({
data: {
msg:"",
userInfo:[],
isTrue:true
},
getuserinfo:function(e){
console.log(e)
var user = e.detail.userInfo;
this.setData({
userInfo:user,
isTrue:false
})
}
})
2）本地缓存保持登录状态
//js代码
getuserinfo:function(e){
console.log(e)
var user = e.detail.userInfo;
this.setData({
userInfo:user,
isTrue:false
})
//本地缓存
wx.setStorageSync('user', user)
},
3）从本地缓存获取存储用户
当缓存中有用户信息就不需要再授权
onLoad: function (options) {
let user = wx.getStorageSync('user');
console.log("从缓存中获取的用户信息：",user);
if(user){
this.setData({
isTrue:false,
userInfo:user
})
}
}
4）退出登录实现
wxml：
<view wx:if="{{isTrue}}">
<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
</view>
<!-- <button open-type="getPhoneNumber" bindgetphonenumber="getphone">获取电话号码</button> -->
<view wx:else>
<image src="{{userInfo.avatarUrl}}"/>
<view>
<text>{{userInfo.nickName}}</text>
</view>
<view>
<text>{{userInfo.city}}</text>
</view>
<button bindtap="exitOut">退出登录</button>
</view>js代码：
Page({
data: {
msg:"",
userInfo:[],
isTrue:true
},
getuserinfo:function(e){
console.log(e)
var user = e.detail.userInfo;
this.setData({
userInfo:user,
isTrue:false
})
//本地缓存
wx.setStorageSync('user', user)
},
onLoad: function (options) {
let user = wx.getStorageSync('user');
console.log("从缓存中获取的用户信息：",user);
if(user){
this.setData({
isTrue:false,
userInfo:user
})
}
},
exitOut:function(){
this.setData({
isTrue:true,
userInfo:null
})
//清除缓存
wx.setStorageSync('user', null);
}
})截图：
扫一扫
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
