【微信小程序系列】微信小程序超简单教程

小程序项目结构

静态页面的构成

HTML：结构

css:样式

js:行为

小程序

页面全部存放在pages, 而且pages目录只能存放页面

页面包括4个文件，pages/页面名/页面名.js(wxss,json,wxml)

4个文件的文件名必须一致

4个文件
.js 页面逻辑

.json 页面配置

.wxml 页面结构

.wxss 页面样式

app.js 是小程序入口文件，先忽略掉

app.wxss 全局样式

app.json
pages配置的数组，是有序的。第一个就是模拟器显示的页面

{// 所有的页面路径都应该配置在这个数组里面，如果没有配置，如果跳转"pages":["pages/index/index",   // 第一个界面即为默认启动页面"pages/logs/logs"],//全局窗口样样式 "window":{//设置网页进行下拉刷新的时候的样式 (需要先有下拉刷新的功能)"backgroundTextStyle":"light",   //（light / dark）//手动设置一个下拉刷新的功能"enablePullDownRefresh": true，//可设置下拉框刷新的颜色（并不是设置页面的背景颜色）"backgroundColor": "#0094ff",//导航栏方案的背景色"navigationBarBackgroundColor": "#fff",//导航栏的标题文字"navigationBarTitleText": "微信小程序",//导航栏方案的前景色 "navigationBarTextStyle":"black"    //（black / white）}
}

如果设置页面背景颜色，可在app.wxss中设置：

page{background-color: #eeeeee;
}

基本标签的使用

组成程序的页面的并不是HTML标签，而是小程序的组件

text：显示文本的
- 相当于是span标签，是行内元素
view包裹作用
- 相当于是div
image 就是显示图片
button按钮
- size:mini :表示小的按钮

<view><!-- 小按钮 --><button>默认的按钮</button><button size="mini">小按钮</button>
</view>

基本语法

数据绑定

{{}}：数据绑定使用 Mustache 语法（双大括号）将变量包起来

定义数据

<!--index.wxml-->
<view>{{ test }}
</view><!--index.js-->
Page({data: {test:"test"},
})

属性绑定
```

<image src="{{imgUrl}}"></image>
```
- 注意：images和pages是同级目录，当pages想引用images里面的图片时"…/…/images/h.jpg"; 如果路径是"…/images/h.jpg"则表示是在pages/images/h.jpg目录下的（则为子目录）

wx:for 遍历数组

<!--index.wxml-->
<view class="container"><view wx:for="{{arr}}" wx:key="index">{{ item }}</view>
</view><!--index.js-->
Page({// 定义数据data: {arr: [1, 2, 3, 4]},
})

wx:for 遍历对象
```

<view wx:for="{{obj}}"  wx:for-item="value" wx:for-index="key" wx:key="key"><text>{{ value.age }}</text>
</view>
```
wx:for-item：数组obj的别名（不进行设置时默认是item，但是如果设置了则只能用设置的别名）
```
<view wx:for="{{list}}" wx:for-item="sss"></view>
```
等同于
```
for (var i = 0 ; i < list.length; i++) {var sss = list[i];
}
```
- wx:for-index：数组的当前项的下标变量名 , 默认为 index ，自定义赋值形式和上面wx:for-item一样
- wx:key：来指定列表中项目的唯一的标识符。
  - 1.需要wx:key的情况
  1. 列表中项目的位置会动态改变或者有新的项目添加到列表中
  2. 希望列表中的项目保持自己的特征和状态
    （如中的输入内容，的选中状态）
  - 2.可不需要wx:key的情况
    如果明确知道该列表是静态，或者不必关注其顺序，可以不用加wx:key，忽略如下的警告。

wx:if wx:elif wx:else 条件语句

<!--index.wxml-->
<view class="container"><view  wx:if="{{ view == '1'}}">我是1</view><view  wx:elif="{{ view == '2'}}">我是2</view><view  wx:else="{{ view == '3'}}">我是3</view>
</view><!--index.js-->
Page({// 定义数据data: {view:"1"},
})

三目运算

<view> {{flag ? "我是true" : "我是false"}} </view>

hidden 显示和隐藏属性

<!--index.wxml-->
<view>flag - {{ flag }}<view hidden="{{flag}}">为true时隐藏,flase为显示</view><button bindtap="btn">修改</button>
</view><!--index.js-->
Page({data: {flag:true},btn(e){this.setData({   //setData是微信小程序提供的一个内置的接口,是用于改变逻辑层中 data下的数据的flag: !this.data.flag})}
})

模板语法（渲染同样的标签，只不过内容不一致而已）

<!--index.wxml-->
<view><template name="staffInfo"><view>name:{{name}}, age:{{age}}</view></template><template is="staffInfo" data="{{...staffA}}"></template><template is="staffInfo" data="{{...staffB}}"></template>
</view><!--index.js-->
Page({data: {staffA: {name:"张三",age:23},staffB:{name:"李四",age:20}},
})

class 与 style 两种写法

index.wxml

<!--index.wxml-->
<view><!-- style 普通写法 --><view style="color: red">我是style red1</view><!--style 动态绑定 数据 --><view style="color:{{ color }};background: {{bg}};">我是style red2</view><view style="color:{{flag? color:color2 }};">我是style red3</view><view style="color:{{!flag? color:color2 }};">我是style red4</view><view> ---- 分割线 ---- </view>   <!-- class 普通写法 --><view class="color1">我是class red1</view><view class="{{ flag ? 'color1':'color2'}} 'bg2'">我是class red2</view><view class="{{ !flag ? 'color1':'color2'}}">我是class red3</view>
</view>

index.js

<!--index.js-->
Page({data: {color:"blue",flag:true,color2:"red",bg:"orange"},
})

index.wxss

<!--index.wxss-->
.color1 {color: #cc1;
}
.bg2 {background: orange;
}
.color2 {color: pink;
}

获取用户基本数据信息

参数 object

属性	类型	默认值	必填	说明
lang	string	en	否	显示用户信息的语言
desc	string		是	声明获取用户个人信息后的用途，不超过30个字符
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用成功的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

其中 desc 是必须要填，用于说明获取用户个人信息的用途。

object.lang 的合法值

值	说明
en	英文
zh_CN	简体中文
zh_TW	繁体中文

具体使用

注意：

仅小程序中 wx.getUserInfo 接口进行调整，小游戏中不受影响；为了兼容低版本，可以做以下兼容：
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile">获取头像昵称</button>
<button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"获取头像昵称</button>

<-- index1.wxml -->
<view>申请获得你的公开信息(用户昵称、头像、城市等)</view>
<button bindtap="getUserProfile">获取用户基本信息</button>
<text>{{userInfoStr}}</text><-- index1.js -->
Page({data: {userInfo: {},canIUseGetUserProfile: false,},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，最多15个中文或者30个字符success: (res) => {console.log("获取到的用户信息成功: ",JSON.stringify(res));//在控制台输出得到的用户信息this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息this.setData({userInfo: e.detail.userInfo,hasUserInfo: trueuserInfoStr: JSON.stringify(res)})},
})

相关接口调整：

小程序与小游戏获取用户信息相关接口：不再返回用户性别及地区信息；

公众号用户信息获取接口：不再返回用户性别及地区信息；

Open平台授权接口：包括App授权登录、公众号H5授权登录、网站扫码授权登录，不再返回用户性别及地区信息；

本次改造调整生效后，所述涉及字段返回值将按如下规则生效：

*注：字段名均保持不变，小程序与小游戏获取用户信息接口“用户性别”字段名为gender；Open 平台授权接口“用户性别”字段名为 sex

实现云数据库的查询

创建页面：

在 .js文件编写数据和请求：

数据绑定

写onLoad函数：

方式一：页面 .js

在 onLoad() 里面添加 this.setData({ list:res.data }) 动态的将数据库中的数据存放到list中

// pages/database/database.js
const db = wx.cloud.database()
Page({/*** 页面的初始数据*/data: {list:[ ]},/*header: {'content-type':'application/x-www-form-urlencoded',//解决请求不到数据//'cookie': wx.getStorageSync("sessionid")//读取sessionid,当作cookie传入后台将PHPSESSID做session_id使用},*/onLoad(){//用于获取当前数据库中表的实例对象，注意后面的.get()!!!wx.cloud.database().collection('book').get()//请求成功处理方式.then(res =>{console.log('请求成功!!!',res.data)this.setData({//动态的将数据库中的数据存放到list数组中list:res.data})})//请求失败处理方式.catch(err =>{console.log('请求失败……',err)})}
})

方式二：

 onLoad(){//固定写法,用于获取当前数据库中goods这个表的实例对象wx.cloud.database().collection('book')//查询操作.get({//请求成功success(res){console.log('请求成功',res)},//请求失败fail(err){console.log('请求失败',err)}})

控制台请求成功，获得数据：

页面显示：

<!--pages/database/database.wxml-->
<text>pages/database/database.wxml</text>
<!-- wx:for是微信数据绑定的一种方式，该list数组有多少数据就显示多少 -->
<view wx:for="{{list}}" wx:key="key">
<!-- item相当于数组名+下标的结合体(list.[id])，适用于调用数组所有数据 --><view>作者:{{item.author}},书名:{{item.bookName}},类目:{{item.category}},内容:{{it.em.content}},价格:{{item.price}}</view>
</view>

有条件的查询where：

onLoad(){  //用于获取当前数据库中表的实例对象，注意后面的.get()!!!wx.cloud.database().collection('book').where({bookName:'龙族'}).get()//请求成功.then(res =>{console.log('请求成功!!!',res.data)this.setData({//动态的将数据库中的数据存放到list数组中list:res.data})})//请求失败.catch(err =>{console.log('请求失败……',err)})
},

查询单条数据doc()：

//js:
wx.cloud.database().collection('goods')
.doc('里面写云数据库中数据的id').get()//wxml: 数据来源为数组，不是数据库的item了
<!-- doc查询的单条数据的页面输出  -->
<view>doc查询的单条数据:</view><view>作者:{{list.author}},书名:{{list.bookName}},类目:{{list.cotegory}},内容:{{list.content}},价格:{{list.price}}，</view>

增删改需要将数据库权限更改:

方法一：

将读写权限全部改为：

{"read": true,"write": true
}

方法二：

略……

实现数据的添加：

//添加数据add1(){wx.cloud.database().collection('book').add({data:{bookName:'老人与海',author:'海明威',price:'50'}}).then(res =>{console.log('添加数据成功')}).catch(err =>[console.log('添加数据失败')])},

删除与修改：

删除修改只能使用 doc 根据 id 查询

//修改并更新update1(){wx.cloud.database().collection('book').doc('058dfefe630d76b31761545328312d23').update({data:{content:'sainahupanwanjie'}}).then(res =>{console.log('更新数据成功')}).catch(err =>[console.log('更新数据失败……')])},//删除数据：remove1(){wx.cloud.database().collection('book').doc('f6e08a64630d9f3b1548b2887ec506e1') //要删除的那条数据的_id.remove().then(res => {console.log('删除成功',res)this.setData({  list : res.data})}).catch(err => { console.log('删除失败……',err)})
},

参考文档链接：https://blog.csdn.net/qq_47354826/category_11261728.html

小程序API

https://www.w3xue.com/mobile/wxminiapp/hpm41q8p.html

基础：

API，全称Application Programming Interface，即应用程序编程接口。

API 是一些预先定义函数，目的是用来提供应用程序与开发人员基于某软件或者某硬件得以访问一组例程的能力，并且无需访问源码或无需理解内部工作机制细节。
API 就是操作系统给应用程序的调用接口，应用程序通过调用操作系统的 API而使操作系统去执行应用程序的命令（动作）。在 Windows 中，系统API是以函数调用的方式提供的。

说明：

wx.on 开头的 API 是监听某个事件发生的API接口

如：接受一个CALLBACK函数作为参数，当该事件触发时，会调用CALLBACK函数。
如未特殊约定，其他API接口都接受一个OBJECT作为参数。
OBJECT中可以指定success,fail,complete来接收接口调用结果。

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

外部 api 的引用示例:

js文件：

// pages/demo02/demo02.js
const app = getApp()
Page({/*** 页面的初始数据*/data: {code:'',testList:[],dreamCode:'',dreamResult:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {self=this;},test1:function() {//访问外部api需请求：wx.request({url: 'http://api.tianapi.com/starinfo/index',method:'GET',//请求参数：data:{key:'9b46f4069f578a5808847c85ce6b93eb',name:'刘德华'},//接口调用成功的回调函数：success:function(res){console.log(res.data);self.setData({testList:res.data.code,testList:res.data.newslist})}})},test2:function() {wx.request({url: 'http://api.tianapi.com/dream/index',method:'GET',data:{key:'9b46f4069f578a5808847c85ce6b93eb',num:5,word:'西瓜'},  success: function(res) {console.log(res.data)//页面获得数据/*self.setData({dreamCode:res.data.code,dreamResult: res.data.newslist})*/}   })}
})

wxml文件：

<!--pages/demo02/demo02.wxml-->
<text>pages/demo02/demo02.wxml</text>
<button open-type="share" bindtap="test2">周公解梦</button>-
<view wx:for="{{dreamResult}}" ><view>梦到{{dreamResult[index].title}}------{{dreamResult[index].result}}</view>
</view><button type="primary" bindtap="test1">明星百科大全</button>
<view wx:for="{{testList}}" ><view>名字：{{testList[index].nationality}}</view> =
</view>