小程序

最新推荐文章于 2024-11-11 17:32:28 发布

糖果的小九

最新推荐文章于 2024-11-11 17:32:28 发布

阅读量204

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_45271323/article/details/105381927

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

参看官方文档地址： https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

目录结构：

.json 后缀的 JSON 配置文件配置页面路由，全局样式等
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

APP.json里：

app.js (相当于全局的状态管理，相当于vuex redux)

pages里哪个在上面就是首页放路径

window是窗口：可以设置全局配置，在指定页面配置会替换全局的配置，可以给他加个navigationBarbackgroundcolor:导航栏背景颜色，16进制颜色，

navigationBartitletext：导航栏标题

enablepulldown refresh true是下拉刷新

tabbar 底部跳转栏

list{放pagepath 放导航按钮最少两个，最多五个]，放iconpath或者选中的地址

用bindtap 帮个点击事件后面写触发函数，在js里page里写函数方法，小程序用this。setdata改数据，有点像react的setstate，传参用data-xx=“xxx”，浏览器事件对象里e里有个target里面有数据，可以打印一下e看一下，分为冒泡和非冒泡，

JSON 配置文件

插件（必须真机测试）：

获取用户信息，包括 openid 和昵称等
支付
获取收货地址

分包
优点：优化小程序首次下载时间，便于多人开发

WXSS文件（可以理解成延用了Vue的语法）

微信小程序用的布局都是flex布局，用rpx 750rpx直接撑满

标签是：view, button, text、image 等等，等同于 dev button span img，顶头标签是page标签
新增单位：rpx
数据绑定：

<view>{{ message }}</view>
Page({
	data: {
			message: 'Hello MINA!'
			}
})

列表渲染

<!--wxml--><view wx:for="{{array}}">{{item}}</view> 
标签里直接写个wx：for{{info} 默认是index，对象数组都能循环

JS逻辑交互，事件绑定事件绑定用bindtap就是冒泡事件，catchtap是捕获从上往下（阻止冒泡）

<button bindtap="clickMe">点击我</button>

改变data值用setData

Page({
	clickMe() {
	this.setData({msg: 'Hello World'})
	}
})

路由

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

如何上线？

1.在开发者工具中点击上传；

2.在微信公众平台官网中的管理 – 版本管理 – 开发版本中查找；

3.在管理的成员管理中添加成员，方可访问体验版本

4.微信开发小程序的版本管理实现多人开发（使用的是git）

数据请求：

注意：首先要配置网络，可查看API文档

每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket），此域名在开发设置中设置（就是登陆微信公众平台的首页中）

域名只支持https协议

小程序要使用预处理语言less或sass必须使用gulp

一、.安装gulp

注意：安装的gulp版本是旧版本,不是最新版本,npm 默认是下载最新版本的;

两个都装：

1. 全局的gulp; npm install -g gulp@3.9.1 相当于壳子
1. 局部的gulp; npm install --save-dev gulp@3.9.1 相当于核心

二、安装所需依赖：

        依赖：                                     作用：

        使用less ：less 和 gulp-less            将less转成css

        使用sass ：node-sass 和 gulp-sass       将sass转成css 

        压缩css的依赖：gulp-clean-css           压缩css       

        将css转成wxss ： gulp-rename            css转wxss

三、创建核心文件：gulpfile.js

const gulp = require("gulp") ;

const less = require("gulp-less") ;

const cleanCss = require("gulp-clean-css");

const rename = require("gulp-rename") ;



// 获取任务，起名为less

gulp.task("less" , () => {

    // 找到所有的less文件

    gulp.src("./**/*.less")

    // 通过管道思想:上一级的输出作为下一级的输入

    .pipe(less()) //将less转成css

    .pipe(cleanCss()) //压缩css

    .pipe(rename((path) => { //将css重命名为wxss

        // console.log(path)

        path.extname = ".wxss";

    }))

    .pipe(gulp.dest("./")) //输出到目录

})



// watch是gulp自带的依赖

gulp.task("watch" , () => {

    // 监听哪个文件变动后执行less方法

    gulp.watch("./pages/**/*.less" , ["less"])

    gulp.watch("./components/**/*.less" , ["less"])

})

开启首页的下拉刷新功能

pages/home/home.json { “usingComponents”: { “prolist”: “/components/prolist/prolist” }, “enablePullDownRefresh”: true, “backgroundColor”: “#efefef”, “backgroundTextStyle”: “dark” }