网站内容发布流程(产品应用(1)网站应用开发(2)平台开发 )
优采云 发布时间: 2021-12-31 10:03网站内容发布流程(产品应用(1)网站应用开发(2)平台开发
)
应用
(1)网站应用开发
(2)移动应用开发
(3)第三方平台开发
(4)公众号开发
只有通过开发者资质认证后，才能使用开发平台提供的能力
微信公众平台微信公众平台概览
账户分类
1.小程序（小游戏）
2.订阅号
3.服务号
4.企业微信
开放平台与公共平台的区别
1.开放平台
(1)微信对外开放接口的平台
(2)开放的接口,供其他网站及App使用
(3)后端程序员是开放平台开发的主力军
2.公众平台
(1) 基于微信公众号，为微信用户提供服务的平台
(2) 所用公众号，都属于微信内开发
(3) 前端程序员是公众平台开发的主力军
理解小程序小程序概述
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
亮点和不足
优点：
1、不需要下载，即用即走
2、入门简单（html、js、css基础）
缺点：
1.最大只有2M，不适合最大类型的项目；
2.上线有限制，不能及时发布
注册小程序账号 小程序账号注册流程
1.进入微信公众平台，右上角立即注册
2.选择账号类型
小程序
3.填写账号信息
邮箱，密码
4.登录自己的邮箱，点击链接，进行激活
5.信息登录
手机号、姓名、*敏*感*词*号、微信扫码
完整的小程序信息
注意：选择服务类目时，不要选择游戏
c1
下载安装微信开发者工具和项目创建工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
项目创建
1.选择项目地址及项目名称
2.填写appid
3.选择小程序
4.不选择云开发
工具的常用功能
1.菜单栏
2.工具栏
3.模拟器
4.目录树
5.编辑器
6.调试器
项目目录 初始化项目目录
app.js 主逻辑文件（入口文件），名称不能改变，文件必须有
app.json 全局配置文件，名称不能修改，文件必须有
app.wxss 全局的样式文件，名称不能修改，但是可以没有
project.config.json 项目对编辑器配置的记录
sitemap.json 站点地图配置
utils 工具目录 （可以删除，可以改变）
util.js 模块
pages 页面目录（可以改变）
index 独立页面
index.js 页面的逻辑文件
index.json 页面配置
index.wxss 页面样式
index.wxml 页面结构
.vue template script style
logs 独立页面
static
components
小程序目录结构
总结：
主体文件：（必须放在根目录）
app.js,app.json,app.wxss
页面四个文件
[page].wxml [page].wxss [page].js [page].json
注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径和文件名
c2
小程序配置配置概览 全局配置 app.json
页面页面路径，
当前数组的第一个元素是小程序的主页
{
"pages": [
"pages/index/index",
"view/cart/cart",
"pages/test/test"
]
}
**entryPagePath ** 小程序起始页
{
"entryPagePath": "pages/index/index",
"pages": [
"pages/index/index",
"view/cart/cart",
"pages/test/test"
]
}
窗户
{
"entryPagePath": "pages/index/index",
"pages": [
"pages/index/index",
"view/cart/cart",
"pages/mine/mine",
"pages/test/test"
],
"window": {
"navigationBarTitleText":"小程序",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#123456",
"navigationStyle": "default",
"enablePullDownRefresh": true,
"backgroundColor": "#abcd12",
"backgroundTextStyle": "dark"
}
}
标签栏
{
"tabBar": {
"backgroundColor": "#fff",
"color": "#000",
"selectedColor": "#f00",
"position": "bottom",
"custom": false,
"borderStyle": "black",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "/static/index.png",
"selectedIconPath": "/static/indexFull.png"
},
{
"text": "购物车",
"pagePath": "view/cart/cart",
"iconPath": "/static/cart.png",
"selectedIconPath": "/static/cartFull.png"
},
{
"text": "我的",
"pagePath": "pages/mine/mine",
"iconPath": "/static/my.png",
"selectedIconPath": "/static/myFull.png"
}
]
}
}
预防措施
1.在json配置文件中，不能加注释
2.json文件所有的字符串都是双引号
3.json文件每一项之间都是以逗号分隔，最后一项不加分号
4.在json文件中，涉及page页面路径，不管是定义还是使用，前面都不能加任何字符
5.tabbar必须在tab页面才会显示
页面配置 page.json
每个小程序页面还可以使用一个.json 文件来配置该页面的窗口性能。页面中的配置项会覆盖当前页面app.json窗口中相同的配置项。
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#f00"
}
场景值概览
语法：
1.在app.js入口文件中使用onLaunch生命周期函数获取
2.在app.js入口文件中使用onShow生命周期函数获取
3.使用api获取wx.getLaunchOptionsSync
// app.js
App({
// 小程序初始化
onLaunch(e) {
// 1.第一种获取场景值的方式
// console.log('onshow',e.scene)
},
// 小程序切前台
onShow(e){
// 1.第二种获取场景值的方式
// console.log('onshow',e.scene)
}
})
// index.js
Page({
click(e){
// console.log('click',e)
// 第3种方式获取场景值[推荐]
var res = wx.getLaunchOptionsSync();
console.log(res)
}
})
小程序逻辑层js逻辑层概述
小程序开发框架的逻辑层使用JavaScript引擎为小程序提供开发者JavaScript代码的运行环境和微信小程序独有的功能。
逻辑层处理数据并发送给视图层，同时接受视图层的事件反馈。
开发者编写的所有代码最终都会打包成一个JavaScript文件，在小程序启动时运行，直到小程序被销毁。这种行为类似于ServiceWorker，所以逻辑层也称为App Service。
在 JavaScript 的基础上，我们增加了一些功能，方便小程序的开发：
注意：applet 框架的逻辑层不在浏览器中运行，因此 web 中 JavaScript 的一些能力是不可用的，如窗口、文档等。
小程序注册App()
语法：
App({})
// 注册小程序实例 App ==> vue中 new Vue({})
App({
// 全局
eat(){
return "正在吃饭！";
},
userInfo:{
username:"admin",
userpass:123
},
// 小程序初始化
onLaunch(e) {
// 获取userInfo数据,使用this获取
console.log(this.userInfo,this.eat());
},
// 小程序切前台
onShow(e){
},
// 小程序切后台
onHide(){
console.log('onhide')
},
// 全局*敏*感*词*错误信息
onError(err){
// 将错误信息进行保存
console.log(err,'123')
},
// 当访问页面不存在时
onPageNotFound(){
// console.log("404")
wx.showToast({
title: '当前页面不存在',
icon:"none"
})
setTimeout(()=>{
console.log(123)
// 跳转到指定页面，关闭其他页面
wx.reLaunch({
url: '/pages/index/index',
})
},1500)
}
})
// getApp()是获取全局实例的唯一方法
var app = getApp();
// console.log(app)
// console.log(app.eat())
// console.log(app.userInfo)
页面注册页面()
index页面
按钮
按钮-获取data数据
Page({
// 直接对象即可
data:{
name:app.userInfo.username,
pass:app.userInfo.userpass,
userInfo:app.userInfo,
page:1
},
getData(){
// 1.获取data数据
// var name = this.data.name;
// console.log(name)
// 2.更新data数据
// 当前修改只能修改js逻辑层数据，不能更新视图层
// this.data.name = "root";
// 当前修改既能修改逻辑层，也能更新渲染页面
this.setData({
name:"root"
})
},
// 页面加载,用来接受页面参数
onLoad(option){
console.log('onload',option)
},
onShow(){
console.log('onshow')
},
onHide(){
console.log('onhide')
},
// *敏*感*词*页面下拉动作
onPullDownRefresh(){
console.log("下拉",this.data.page++)
},
// *敏*感*词*页面向下滚动到指定位置
onReachBottom(){
console.log('向下滚动',this.data.page++)
},
// *敏*感*词*页面滚动
onPageScroll(e){
console.log(e)
},
onShareAppMessage(){
return{
title:"商品"
}
},
onShareTimeline(){}
})
模块化的
commonjs 规范
模块js文件
const port = 3000;
// 1.commonjs
module.exports = {
port
}
页面.js
// 引入模块
// commonjs
const config = require("../../utils/config");
console.log(config)
ES6 规范
模块.js
const port = 3000;
// 2.es6
// export {port}
export default {port}
页面.js
// 引入模块es6
// import {port} from "../../utils/config";
// console.log(port)
import config from "../../utils/config";
console.log(config)
基本语法基本组件
官方提供的布局标签
概述：该框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。详情请参考组件文档。
什么是组件：
Content goes here ...
id style class hidden data-* bind catch
注意：所有组件和属性都是小写的，用连字符连接
视图组件：
box
**文本组件：**
hello > world
登录
图像组件
数据渲染
(1)渲染数据
name:{{ name }}
pass:{{ pass }}
名字:{{ userInfo.username }}
(2) 属性的绑定
属性绑定
属性绑定
(3)列表渲染
{ 变量 }}" 默认 item，index
wx：key="*this/唯一的属性"
-->
{{ index }}--{{ item }}
