通用技术02--微信小程序配置浅析

最新推荐文章于 2024-09-02 07:35:07 发布

程序学者

最新推荐文章于 2024-09-02 07:35:07 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/qq_34536604/article/details/106997758

版权

项目工程目录

小程序文件类型

.wxml 结构，类似于html

标签名字：

由HTML（<div>、<p>、<span>...）改为===》 微信小程序的WXML (<view>)`

`wx:if	wx:for	{{}}`

.wxss 表现，类似于css

具备css的大部分属性

新增尺寸单位

全局样式和局部样式

.js 行为 —> 原生js语言
.json 配置

工具配置—project.config.json

项目配置—app.json

页面配置—<page name>.json

目录解释

pages目录—页面相关的代码（新建小程序项目，自动生成）
utils目录—工具相关代码（网络请求、文件操作等）（新建小程序项目，自动生成）
其他文件—thirdparty(第三方代码)、conponents(小程序组件代码)、resources(存放小程序资源，图标图片等等)

小程序的全局入口、配置与样式

全局入口—app.js
全局配置—app.json
全局样式—app.wxss

小程序框架

小程序的配置

全局配置 — app.json
页面配置 — <pages>.json

全局配置

pages列表配置
window属性配置

wechat_pro02

tabbar配置(底部菜单栏)

WeChat_pro03

补充

iconPath 是未选中时的图标

selectedIconPath 是选中时的图标

页面配置

只能配置全局配置中的window配置项内容
会覆盖全局配置中的window配置
开启下拉刷新

在 .json写入如图所示，即可下拉触发刷新

WeChat_pro05

小程序逻辑层

小程序注册逻辑

App函数

注册全局唯一的小程序

只能调用一次

接受一个对象作为函数参数，这个对象指定了两个东西（第一个东西是小程序的全局数据，第二个东西是小程序的生命周期回调函数）

wechat_pro06

页面注册逻辑

Page函数

注册一个页面

接受一个对象作为函数参数，这个对象指定了两个东西（第一个东西是页面数据，第二个东西是页面的生命周期回调函数）
页面数据

data属性

data:{message: "hello world",}

访问： this.data.message

修改：this.setData({})

使用全局数据

获取全局唯一的App实例 const app = getApp()

通过唯一实例获取全局数据 var data = app.globalData
页面生命周期回调

生命周期回调函数	触发时机
OnLoad	生命周期回调—监听页面加载
OnShow	生命周期回调—监听页面显示
OnReady	生命周期回调—监听页面初次渲染完成
OnHide	生命周期回调—监听页面隐藏
OnUnload	生命周期回调—监听页面卸载

小程序的视图层。xxx.wxml

数据绑定
列表渲染
条件渲染
绑定事件

数据绑定


语法：`{{ }}`

//视图层 例如：index.wxml
<view>{{ message }}</view>

//逻辑层 例如：index.js
Page({
    data:{
        message: 'Hello MINA!'
    } 
})

列表渲染


语法：	`wx:for`

//逻辑层  xxx.js
Page({
    data:{
        array:[{          // array数组，包含了两个对象
            messqge:'foo',
        },{
            message:'bar'
        }]
    } 
})    

//视图层 xxx.wxml
<view wx:for="{{array}}">   // for循环array数组   
//注意，与变量展示相比，需要加两个冒号
    {{index}}: {{item.message}} 
    // index是数组序号，item是数组里的对象
</view>

条件渲染


语法： `wx:if 、wx:elif、wx:else`

<view wx:if=“{{length > 5}}”> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

绑定事件

页面事件	触发时机
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开（推荐使用）
longtap	手指触摸后，超过350ms再离开
touchstart	手指触摸动作开始
touchend	手指触摸动作结束

事件绑定的写法以key、value的形式
key以bind或catch开头，然后跟上事件的类型

// 视图层  xxx.wxml
<view id="tapTest" data-hi="WeChat" bindtap='tapName'> Click me! </view>


// 逻辑层 xxx.js
Page({
    tapName: function(event) {
          console.log(event)
    }
})

小程序提供的能力和常用API

微信API

网络请求
本地储存
文件系统

网络请求

HTTP请求（异步的请求！！！！！！！）


wx.request({   //HTTP请求，wx.request（）函数包含一个对象{...}
    url: '',         //string类型，表示服务端地址
    data: {},    //表示请求参数
    header: {},  //object类型，表示HTTP headers请求头
    method: 'POST',  //string类型，请求方法
    success: function(res){ //function类型，接口成功的回调函数
        console.log(res.data) 
    },
    fail: function(res){}   //function类型，接口失败的回调函数
})

异步特性

wechat_pro09

wechat_pro10

文件上传、下载

上传文件

wx.uploadFile({
    url: 'upload',   //服务端地址
    filePath: 'example.jpg', //文件资源的路径
    name: 'file',                //文件对应的Key,文件名字
    formData: {                  //文件附加信息
        'user'：‘test’
    },
    success(res){               //异步的，成功回调函数
       console.log(res.data)
    }
})

下载文件


wx.downloadFile({
    url: 'download',         //下载的url
    header: {},
    filePath: 'example.jpg',  //下载后存储的路径
    success(res) {               //接口成功的回调函数
       console.log(res.statusCode)
    }

})

*Task(网络任务对象)

异步任务提交以后，需要对任务进行操作时，使用Task对象。

RequestTask (发起HTTP请求，可以得到一个RequestTask)

UploadTask (同理，上传文件时，也可以得到)

DownloadTask （同理）

SocketTask （同理）

拿到这些task，可以做什么呢？

中断任务（比如上传文件的时候，上传到一半的时候，想取消它，可以调用这task来中断）

触发回调函数（比如上传文件的时候，上传到10%时，可以用task来触发回调函数）

关闭连接（比如HTTP请求，socket请求，请求到一半，可以用task对象来关闭网络连接）

本地存储

将数据存储在本地缓存中指定的key中，数据存储生命周期跟小程序本身一致

操作本地存储，有四个API:

wx.setStorage

wx.getStorage（异步的），也有同步的api：wx.getStorageSync

wx.removeStorage

wx.clearStorage (慎用，会把本地所有的缓存都删除)

wechat_pro11

文件系统

全局文件管理器

获取全局唯一的文件管理器. var fs=wx.getFileSystemManager()

文件的增删改查

对文件进行操作的API有很多，完全覆盖编程语言对文件的各种操作

fs.saveFile

fs.writeFile

fs.readFile

fs.removeSavedFile

fs.appendFile

文件夹的操作

fs.mkdir

fs.rmdir

fs.isDirectory

fs.isFile

开发能力

用户数据
推送消息
运营数据

用户数据

头像、昵称等公开信息 — wx.getUserInfo()
openid等敏感数据

推送消息

基于微信的通知渠道，小程序框架为开发者提供了可以高效触达用户的消息。（在微信的服务通知查看）

运营数据

小程序管理后台—数据分析
小程序数据助手（小程序）

基础组件

视图容器—view、scroll-view、swiper、cover-view
基础内容—text、icon、rich-text
表单、导航—button、form、input

WeUI-wxss

WeUI是一套同微信原生视觉体验一致的基础样式库
微信官方设计团队为微信内网页和微信小程序量身设计
包含button、view等众多元素
Github搜索weui-wxss获取源码
手机预览，微信搜索：weui小程序

怎么使用weui

1.新建一个thirdparty的目录，放入weui.wxss文件
2.在全局的app.wxss文件中，加入 @import”thirdparty/weui.wxss”;

wechat_pro12

小程序发布流程

微信小程序登陆

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

登录流程时序

小程序端调用wx.login()接口获取登录凭证code
小程序端调用wx.request()接口把code发送到我的服务器后台
在我的服务器后台，我已知appId、appsecret、code,然后调用如下官方提供的http接口，官方提供了http接口地址为： https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code, 即可返回获取openId、session_key
在我的服务器后台获得的openid，session_key, 然后生成一个唯一字符串sessionid作为键，将openid和session_key作为值，存入redis，超时时间设置为2小时，将sessionid返回给微信小程序，微信小程序端把sessionid保存在storage中；
在之后，调用那些需要登录后才有权限的访问的后台服务时，你可以将保存在storage中的sessionid取出并携带在请求中（可以放在header中携带，也可以放在querystring中，或是放在body中，根据你自己的需要来使用），传递到后台服务，后台代码中获取到该sessionid后，从redis中查找是否有该sessionid存在，存在的话，即确认该session是有效的，继续后续的代码执行，否则进行错误处理。