前端实习——微信小程序(4)

最新推荐文章于 2023-07-17 17:37:10 发布

是吱吱

最新推荐文章于 2023-07-17 17:37:10 发布

阅读量442

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_41662017/article/details/103829617

版权

微信小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

十一、Weui

第三方ui库。

视图界面上能够提升开发效率

如果有自己的设计稿，使用第三方UI库，开发不太快。

如果是移动端页面，现成ui库

1.如何实现的

基于小程序框架

基于小程序自定义组件规范

1.先为项目开启npm模块功能

2.执行

npm init -y 在项目根目录下
npm i weui-miniprogram --production//避免安装一些与业务无关的文件，减少代码下载

3.工具-构建npm模块

4.引入组件全局样式app.wxss

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

5.全局注册-局部注册

usingComponents

总结：使用步骤要掌握

学习weui其实就是了解一些组件属性和slot

<mp-navigition-bar background="red" color="white" back="{{false}}">
  <view slot="left" class="back"><text>返回</text>|<text>首页</text></view>
  <view slot="center">
  <mp-icon icon="search" color="#fff" type="field"/>
  订单查询</view>
</mp-navigition-bar>

{
  "usingComponents": {
    "mp-navigition-bar": "/miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar",
    "mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
  },
  "navigationStyle": "custom"
}

2.cells和cell

<mp-cells title="订单基本信息查询" footer="请仔细核对">
  <mp-cell value="待付款" footer="查看" bindtap="showInfo" link>
    <image src="{{fkImg}}" slot="icon" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
  </mp-cell>
  <mp-cell value="待发货" footer="查看" link>
    <image src="{{fhImg}}" slot="icon" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
  </mp-cell>
  <mp-cell value="待评价" footer="查看" link>
    <image src="{{pjImg}}" slot="icon" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
  </mp-cell>
  <mp-cell value="更多" footer="查看" link>
    <image src="{{gdImg}}" slot="icon" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
  </mp-cell>
  <mp-actionSheet show="{{showMenu}}" actions="{{groups}}" title="请选择以下操作"></mp-actionSheet>
</mp-cells>

十二、打包

不分包的时候，所有的页面都会统一被下载，编译

使用分包时，会在进入模块后，按需加载

1.基本分包的特点

基本分包，虽然直接访问的是分包页面，但也会执行下载和编译主包的文件

配置分包，是为了全局的项目配置，只能在app.json中配置分包

subpackages属性进行处理分包

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",//相对于root根目录
        "pages/banana"
      ]
    }
  ]
}

2.独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

适合场景：不依赖主包的东西

十三、性能优化

了解、兼容性问题、版本兼容的处理、小程序的运行机制

1.小程序运行时机制

https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/operating-mechanism.html

十四、开放能力

1.小程序中登录流程

1.用户名和密码->查询数据库->如果匹配成功,返回登录标识|cookie|localstorage->下次在访问，把登录标识传到后台(header传token\cookie\session)

2.手机号登录(+验证码登录)

/login:传参->username

/getTelphoneCode 传参?tel:手机号

/login 传参?code验证码

3.小程序中自带一种登录流程

小程序和微信挂钩。每一个用户都划分好了自己的用户ID，

登录成功以后，我们可以通过小程序的自带的登录流程机制获取比较敏感的用户id(不会变)

session-key：是临时秘钥，可以解密一些敏感数据，原则上，不能把key发送到小程序端
opendid：微信用户的唯一id,

2.获取用户信息

1.授权

获取用户的某些信息或者使用用户的硬件设备的信息，使用语音设备，都要让用户同意授权

2.获取信息

使用api进行获取

第一次获取用户线下必须通过button按钮的open-id

如果用户同意授权，通过wx.getUserInfo就能得到用户信息

// pages/01login/01login.js
Page({
  _login(){
    // 通过wx.login获取临时code
    wx.login({
      success(res){
        console.log(res);//res.code
        let code = res.code;
        // 2.访问开发者服务器，自己的服务器。把code传过去进行解密。调用autn.
        wx.request({
          url: 'http://localhost:3000/login',
          data:{
            code
          },
          success(res){
            console.log(res,'访问')
          }
        })
      }
    })
  }
})

后台api

let express = require('express');
// got模块相当于前台的ajax功能
let got = require('got')
let app = express();
app.get('/login',(req,res)=>{
    // req.query.code
    let code = req.query.code;//小程序登录临时code
    // 使用auth.code2session接口解密，获取此小程序用户的id
    let appid="wx19b56be9d0021cf0";
    let secret="736ba50fc39cec916eea0382c6ccd0b1";
    let js_code=req.query.code;
    let code2sessionUrl=` https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${js_code}&grant_type=authorization_code`;
    // let code2sessionUrl=` https://api.weixin.qq.com/sns/jscode2session?appid=wx19b56be9d0021cf0&secret=736ba50fc39cec916eea0382c6ccd0b1&js_code=0117xl7R1XJdl41IiwaR1Tzm7R17xl7A&grant_type=authorization_code`;
    (async ()=>{
        try{
            const response = await got(code2sessionUrl);
            let result = JSON.parse(response.body);
            console.log(result);
            res.send({
                openid:result.openid+'我是一个锁子'
            });//openid和session_key(为了解密敏感数据)
        }catch(err){
            res.send(err.body);
        }
    })();
    // res.send({
    //     code:req.query.code,
    //     msg:'login ok'
    // })

})
app.listen(3000);