赞
踩
玩一下模板功能
新建的一个template的目录来放我们的模板页面
首先在模板页面中定义模板。使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段。但如果我们需要在other页面中使用模板页面,使用 is 属性,声明需要的使用的模板
但是我们发现这样是不行的,而且报了Template `myTmp` not found.的错误。这个是因为我们没有引用模板
这样基本的模板效果就实现了
当我们在模板中设置样式,但是没有效果。这个是因为在样式中我们没有引用它
样式需要使用@import
动态的在模板中注入数据
就是在template中使用data关键字,然后就可以直接给它动态的传递数据了
获取用户id
- handleGetOpendId(){
- // 1.获取登录凭证
- wx.login({
- success: (res) => {
- console.log(res);
- let code=res.code
- // 2.将登录凭证发送给服务器
- },
- })
- }
就是通过wx.login的成功回调后的res
完整代码如下:
- const fs = require('fs')
- const path = require('path')
- const express = require('express')
- const bodyParser = require('body-parser')
- const request = require('./util/request')
- const packageJSON = require('./package.json')
- const exec = require('child_process').exec
- const cache = require('apicache').middleware
- const Fly=require("flyio/src/node");
- const jwt = require('jsonwebtoken');
- const fly=new Fly;
-
-
- const app = express()
-
- // CORS & Preflight request
- app.use((req, res, next) => {
- if(req.path !== '/' && !req.path.includes('.')){
- res.set({
- 'Access-Control-Allow-Credentials': true,
- 'Access-Control-Allow-Origin': req.headers.origin || '*',
- 'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
- 'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
- 'Content-Type': 'application/json; charset=utf-8'
- })
- }
- req.method === 'OPTIONS' ? res.status(204).end() : next()
- })
-
- // cookie parser
- app.use((req, res, next) => {
- req.cookies = {}, (req.headers.cookie || '').split(/\s*;\s*/).forEach(pair => {
- let crack = pair.indexOf('=')
- if(crack < 1 || crack == pair.length - 1) return
- req.cookies[decodeURIComponent(pair.slice(0, crack)).trim()] = decodeURIComponent(pair.slice(crack + 1)).trim()
- })
- next()
- })
-
- // body parser
- app.use(bodyParser.json())
- app.use(bodyParser.urlencoded({extended: false}))
-
- // cache
- app.use(cache('2 minutes', ((req, res) => res.statusCode === 200)))
-
- // static
- app.use(express.static(path.join(__dirname, 'public')))
-
-
- // 注册获取用户唯一标识的接口
- app.use('/getOpenId', async (req, res, next) => {
- let code = req.query.code;
- let appId = 'wx810e8b1fde386fde';
- let appSecret = '8bb909649da12002fba7a47f5ac3791b';
- let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`
- // 发请求给微信服务器获取openId
- let result = await fly.get(url);
- let openId = JSON.parse(result.data).openid;
- console.log('openId', openId);
- // 自定义登录态
- let person = {
- username: '北方汉子',
- age: 18,
- openId
- }
- // 对用户的数据进行加密,生成token返回给客户端
- let token = jwt.sign(person, 'atguigu');
- console.log(token);
- // 验证身份,反编译token
- let result2 = jwt.verify(token, 'atguigu');
- console.log(result2);
- res.send(token);
- });
-
-
-
- // router
- const special = {
- 'daily_signin.js': '/daily_signin',
- 'fm_trash.js': '/fm_trash',
- 'personal_fm.js': '/personal_fm'
- }
-
- fs.readdirSync(path.join(__dirname, 'module')).reverse().forEach(file => {
- // console.log(file);
- if(!file.endsWith('.js')) return
- // album_newest.js ---> /album_newest.js ---> /album_newest ---> /album/newest
- let route = (file in special) ? special[file] : '/' + file.replace(/\.js$/i, '').replace(/_/g, '/')
- let question = require(path.join(__dirname, 'module', file))
-
- app.use(route, (req, res) => {
- console.log(route);
- console.log(req)
- console.log('------');
- console.log(req.cookies)
- let query = Object.assign({}, req.query, req.body, {cookie: req.cookies})
- question(query, request)
- .then(answer => {
- console.log('[OK]', decodeURIComponent(req.originalUrl))
- res.append('Set-Cookie', answer.cookie)
- res.status(answer.status).send(answer.body)
- })
- .catch(answer => {
- console.log('[ERR]', decodeURIComponent(req.originalUrl))
- if(answer.body.code == '301') answer.body.msg = '需要登录'
- res.append('Set-Cookie', answer.cookie)
- res.status(answer.status).send(answer.body)
- })
- })
- })
-
- const port = process.env.PORT || 3000
- const host = process.env.HOST || ''
-
- app.server = app.listen(port, host, () => {
- console.log('欢迎使用音乐服务器');
- console.log('服务器地址: http://localhost:3000')
- })
-
- module.exports = app
要用到这个库
npm install flyio
npm install jsonwebtoken
对数据进行加密
这个是反编译
为什么要分包
1. 小程序要求压缩包体积不能大于 2M,否则无法发布
2. 实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传
3. 分包后可解决 2M 限制,并且能分包加载内容,提高性能
4. 分包后单个包的体积不能大于 2M
5. 分包后所有包的体积不能大于 16M
分包形式
1. 常规分包 2. 独立分包 3. 分包预下载
常规分包
1. 开发者通过在 app.json subpackages 字段声明项目分包结构
2. 特点:
a) 加载小程序的时候先加载主包,当需要访问分包的页面时候才加载分包内容
b) 分包的页面可以访问主包的文件,数据,图片等资源
c) 主包:
i. 主包来源: 除了分包以外的内容都会被打包到主包中 ii. 通常放置启动页/tabBar 页面
先把page下的包分别移动到songPackage及otherPackage下。那么page下的包就是主包了。
然后在app.json中设置配置
这样分包成功
1. 设置 independent 为 true
2. 特点:
a) 独立分包可单独访问分包的内容,不需要下载主包
b) 独立分包不能依赖主包或者其他包的内容
3. 使用场景
a) 通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包
b) 如:临时加的广告页 || 活动页
1. 配置
a) app.json 中设置 preloadRule 选项
b) key(页面路径): {packages: [预下载的包名 || 预下载的包的根路径])}
2. 特点:
a) 在加载当前包的时候可以设置预下载其他的包 b) 缩短用户等待时间,提高用户体验
现在我们使用的都是个人账号,实现不了支付功能。需要企业账号。
支付流程官网图解
支付流程详细说明
1. 用户在小程序客服端下单(包含用户及商品信息)
2. 小程序客户端发送下单支付请求给商家服务器
3. 商家服务器同微信服务器对接获取唯一标识 openID
4. 商家服务器根据 openId 生成商户订单(包含商户信息)
5. 商家服务器发送请求调用统一下单 API 获取预支付订单信息
6. 商家对预支付信息签名加密后返回给小程序客户端
a) 签名方式: MD5 b) 签名字段:小程序 ID, 时间戳, 随机串,数据包,签名方式 c) 参考地址 :
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3
7. 用户确认支付(鉴权调起支付) a) API: wx.requestPayment() 、
8. 微信服务器返回支付结果给小程序客户端
9. 微信服务器推送支付结果给商家服务器端
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。