微信小程序开发文档-萧然 8.28

已于 2022-05-19 10:32:22 修改
阅读量8.7k 收藏 49
点赞数 9
文章标签： 微信小程序
于 2022-04-28 09:01:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46767263/article/details/124465181
版权

这里我开源了一个微信小程序的案例：https://gitee.com/xiaoshixiaoran/wechat-applet
相关后台接口我会有空用SSM重写一遍再挂上去

准备工作

​ 微信小程序官网 https://mp.weixin.qq.com/

​ 注册微信小程序开发:

​ 请选择注册的帐号类型 ,选择小程序 填写相关信息
在这里插入图片描述
在这里插入图片描述

1.小程序基本搭建

1.1创建微信小程序项目

打开微信开发工具后左上角有个项目点击 新建项目 选择小程序，项目名称自己命名 ，目录 新建个文件夹存放 App ID就是官网中开发管理里面的开发设置给定开发者ID直接复制过来，开发模式选择小程序，后端服务选择 不使用云服务，语言选择JavaScript
在这里插入图片描述

1.2文件说明

​ 默认配置

​ 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

​ sitemap 配置小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

在这里插入图片描述

  • .wxml，类似 HTML 的角色。
  • .wxss，具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
  • .js，编写脚本与用户交互，响应用户的点击、获取用户的位置等等。
  • .json，是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色

详情见小程序开发目录结构：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

1.2.1 app.json 必要属性介绍

​ app.json中必要参数配置pages,为小程页面路径列表，每新建一个页面这里会自动将路径填入

​ window属性配置全局的默认窗口表现：

  • ​ navigationBarBackgroundColor 导航栏背景颜色
  • ​ navigationBarTitleText 导航栏标题文字内容
  • ​ navigationBarTextStyle 导航栏标题颜色，仅支持 black / white

更多参数见配置项window:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

在这里插入图片描述
详情见小程序全局配置https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

单页面配置大于全局属性配置如

在这里插入图片描述

1.3 创建新页面

直接新建文件夹然后鼠标移动至文件夹上右击page,会自动生成四个文件，命名.js 命名.json 命名.wxml 命名.wxss
在这里插入图片描述# 2.小程序的基础知识储备

1、Flex 布局

  1. Flex基本概念

    1. Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
    2. 任何一个容器都可以指定为 Flex 布局。
    3. display: ‘flex’

在这里插入图片描述
4. 这部分是一阶段基础知识,可看[文档](http://www.runoob.com/w3cnote/flex-grammar.html)

2、移动端相关知识点

1.物理像素

  1. 屏幕的分辨率

  2. 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

2.设备独立像素 、 css 像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在 android 机中 CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

  1. 概念

    1. dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以 Iphon6 的 dpr 为准 dpr = 2

    2. PPI: 一英寸显示屏上的像素点个数

    3. DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

  2. 不同机型对比表

在这里插入图片描述

  1. 部分机型图示
    在这里插入图片描述

3、移动端适配方案

1.viewport 适配

  1. 为什么做 viewport 适配 ?

a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px

b) 手机实际视口宽度都要小于 980px，如: iphone6 为 750px

c) 开发需求需要将 980 的页面完全显示在手机屏幕上且没有滚动条

  1. 代码实现
<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.rem 适配

  1. 为什么做 rem 适配?
    a) 机型太多,不同的机型屏幕大小不一样
    b) 需求：一套设计稿的内容在不同的机型上呈现的效果一致,根据屏幕大小不同的变化,页面中的内容也相应变化
  2. 原生代码实现:
function remRefresh() {
let clientWidth = document.documentElement.clientWidth; 
// 将屏幕等分 10 份
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px';
}
window.addEventListener('pageshow', () => {
remRefresh()
})
// 函数防抖
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})

3.视图层详解

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

组件(Component)是视图的基本组成单元。

该部分将截取官方文档并加以注解

1.WXML样式文件详解

  1. WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

  2. WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

  1. 与 CSS 相比，WXSS 扩展的特性有：

    1. 响应式⻓度单位:即尺寸单位 -->rpx
    2. 样式导入

  2. 注意:

当页面文件在同一级目录下且命名相同(后缀不同),可以互相引用却不用导入

Ⅰ-尺寸单位

1.rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

Ⅱ-样式导⼊

Ⅲ-内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

  1. style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度
<view style="color:{{color}};" />
  1. class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔
<view class="normal_view" />

.normal_view{
	color:#333;
}

2.WXML语法详解

Ⅰ-数据绑定与写法规则

1) 单向简单数据绑定

  1. WXML 中的动态数据均来自对应 Page 的 data。

  2. Mustache 语法{{}}视作运算标记,里面的内容表示表达式

    //main.wxml
<view>静态数据</view>			//页面显示：静态数据
<view>{{message}}</view>	  //页面显示：Hello MINA

    //main.js
Page({
    /**
   * 组件的初始数据
   */
  data: {
    message: 'Hello MINA!'
  }
})
2)运算

Ⅱ-列表渲染

1）wx:for

  1. 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

  2. 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

  3. 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

    //  .js
//定义数组
let array=[1, 2, 3, 4, 5]

    //  .wxml
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName}}
</view>
2) wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

① wx:key 的值以两种形式提供

  1. 字符串，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。

  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

<block wx:for="{{posts}}"   wx:key="id"></blocK>
//id是posts数组中的对象里的一个属性
②使用 wx:key 的意义

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

Ⅲ-条件渲染

1）wx:if wx:else

1.在框架中，使用 wx:if="" 来判断是否需要渲染该代码块:

<view wx:if="{{recentPlayList.length}}"> True </view>

2.也可以用 wx:elif 和 wx:else 来添加一个 else 块:

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

Ⅳ-事件系统

什么是事件?
  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息，如 id, dataset, touches。
事件的使用方式
  • 在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<button class="confirm-btn" bindtap="login">登录</button>

login(){
      //提示用户
      wx.showToast({
        title: '手机号不能为空',
        icon:'none'
      })
      return;
    }

点击button按钮弹出提示 手机号不能为空

Ⅴ-双向绑定

4.逻辑层详解

  1. 原理:小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

​ 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

​ 开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似ServiceWorker，所以逻辑层也称之为 App Service。

  1. 在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：
  • 增加 App 和 Page 方法，进行程序注册和页面注册。
  • 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
  • 提供模块化能力，每个页面有独立的作用域。

注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

该部分将截取官方文档并加以注解

1、页面路由

在小程序中所有页面的路由全部由框架进行管理

Ⅰ-页面栈与路由方式

  1. 框架以栈的形式维护了当前的所有页面。

  2. 对于路由的触发方式以及页面生命周期函数如下：

    路由方式页面栈表现触发时机路由前页面路由后页面
    初始化新页面入栈小程序打开的第一个页面onLoad, onShow
    打开新页面新页面入栈调用 API wx.navigateTo
    使用组件    		onHideonLoad, onShow
    页面重定向当前页面出栈，新页面入栈调用 API wx.redirectTo
    使用组件    		onUnloadonLoad, onShow
    页面返回页面不断出栈，直到目标返回页调用 API wx.navigateBack
    使用组件
    用户按左上角返回按钮    		onUnloadonShow
    Tab 切换页面全部出栈，只留下新的 Tab 页面调用 API wx.switchTab
    使用组件
    用户切换 Tab    		各种情况请参考下表
    重启动页面全部出栈，只留下新的页面调用 API wx.reLaunch
    使用组件    		onUnloadonLoad, onShow

    3.代码示例

    wx.navigateTo({ //当前页面被隐藏，缓存在栈中，最多存放10个页面
url: "/pages/posts/post" //跳转的页面路径
})
 wx.redirectTo({ //当前页面被销毁
url: "/pages/posts/post"
})

    4.Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

    当前页面路由后页面触发的生命周期（按顺序）
    AANothing happend
    ABA.onHide(), B.onLoad(), B.onShow()
    AB（再次打开）A.onHide(), B.onShow()
    CAC.onUnload(), A.onShow()
    CBC.onUnload(), B.onLoad(), B.onShow()
    DBD.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
    D（从转发进入）AD.onUnload(), A.onLoad(), A.onShow()
    D（从转发进入）BD.onUnload(), B.onLoad(), B.onShow()

Ⅱ-注意事项

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

5.组件

Ⅳ-自定义组件

1.创建文件夹 命名NavHeader

2.新建Component 命名NavHeader

// components/NavHeader/NavHeader.json
{
"component": true,//		1.将 component 字段设为 true 可将这一组文件设为自定义组件
"usingComponents": {
 "NavHeader" : "/components/NavHeader/NavHeader"//注册
}
}

 // components/NavHeader/NavHeader.wxml
//2.在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。
<view class="header">
   <text class="title">{{title}}</text>
   <view>
     <text>{{nav}}</text>
     <text class="more">查看更多</text>
   </view>
</view>

//components/NavHeader/NavHeader.wxss
///* 3.这里的样式只应用于这个自定义组件 */
.header{
padding-bottom: 20rpx;
}
.header .title{
font-size: 32rpx;
line-height: 80rpx;
color: #666;
}
.header .more{
float: right;
border: 1rpx solid #333;
padding: 10rpx 20rpx;
font-size: 24rpx;
border-radius: 30rpx;
}

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。更多细节参见 Component构造器 。

// components/NavHeader/NavHeader.js
Component({
/**
*4.组件的属性列表  两个默认值 使用时传入参数
*/
properties: {
 title:{
   type:String,
   value:'title默认值'
 },
 nav:{
   type:String,
   value:'nav默认值' 
 }
},

/**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

使用自定义组件需要在相对于 json文件中引用

//5.
{
  "usingComponents": {
    "NavHeader" : "/components/NavHeader/NavHeader"
  }
}

使用效果
在这里插入图片描述

Ⅴ- swiper配合swiper-item

1、swiper 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

2、swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。xun’hua

常用来作为轮播组件
在这里插入图片描述
3、常用参数

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色1.1.0
indicator-active-colorcolor#000000否当前选中的指示点颜色1.1.0
autoplaybooleanfalse否是否自动切换1.0.0
circularbooleanfalse否是否采用衔接滑动1.0.0

详情见官网说明----->视图容器/swiper

6.小程序生命周期

分为应⽤⽣命周期和⻚⾯⽣命周期

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

1、应用生命周期

2、页面生命周期

1.页面生命周期表

属性类型说明
dataObject页面的初始数据
optionsObject页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
onLoadfunction生命周期回调—监听页面加载
onShowfunction生命周期回调—监听页面显示
onReadyfunction生命周期回调—监听页面初次渲染完成
onHidefunction生命周期回调—监听页面隐藏
onUnloadfunction生命周期回调—监听页面卸载
onPullDownRefreshfunction监听用户下拉动作
onReachBottomfunction页面上拉触底事件的处理函数
onShareAppMessagefunction用户点击右上角转发
onShareTimelinefunction用户点击右上角转发到朋友圈
onAddToFavoritesfunction用户点击右上角收藏
onPageScrollfunction页面滚动触发事件的处理函数
onResizefunction页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTapfunction当前是 tab 页时，点击 tab 时触发

2.示例代码

//index.js
Page({
data: {
 text: "This is page data."
},
onLoad: function(options) {
 // Do some initialize when page load.
},
onShow: function() {
 // Do something when page show.
},
onReady: function() {
 // Do something when page ready.
},
onHide: function() {
 // Do something when page hide.
},
onUnload: function() {
 // Do something when page close.
},
onPullDownRefresh: function() {
 // Do something when pull down.
},
onReachBottom: function() {
 // Do something when page reach bottom.
},
onShareAppMessage: function () {
 // return custom share data when user share.
},
onPageScroll: function() {
 // Do something when page scroll
},
onResize: function() {
 // Do something when page resize
},
onTabItemTap(item) {
 console.log(item.index)
 console.log(item.pagePath)
 console.log(item.text)
},
// Event handler.
viewTap: function() {
 this.setData({
   text: 'Set some data for updating view.'
 }, function() {
   // this is setData callback
 })
},
customData: {
 hi: 'MINA'
}
})

7.前后端交互

1、发送请求

wx.request(Object object)

以 Promise 风格 调用：不支持

小程序插件：支持，需要小程序基础库版本不低于 1.9.6

发起 HTTPS 网络请求。使用前请注意阅读相关说明。

必要参数url开发者服务器接口地址

接口说明说明: 调用此接口 , 可获取 banner( 轮播图 ) 数据

➢ 接口地址 : /banner

➢ 请求方式: GET

➢ 可选参数 :type:资源类型,对应以下类型,默认为 0 即 PC

  • 0 PC
  • 1 android
  • 2 iphone
  • 3 ipa

代码示例

wx.request({
       url: 'http://localhost:3000/banner',//请求路径
       data: {type:2},//携带参数
       success: (res)=>{//成功回调
         console.log('请求成功',res)
       },
       fail:(err) => {//失败回调
         console.log('请求失败',err)
       }
     })

使用封装后代码示例

data: {
      bannerList:[],// 轮播图数据
      recommendList:[],// 推荐歌单
      topList:[],// 排行榜数据
  },
Page({
  /**
   * 页面的初始数据
   */
  data: {
      bannerList:[],// 轮播图数据
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    //0 PC 1 android  2 iphone 3 ipad 
    let bannerListData = await request('/banner',{type:2});
    this.setData({
      bannerList:bannerListData.banners
    })
  }

wx.setStorageSync(string key, any data) | 微信开放文档 (qq.com)

示例代码

存储

import request from '../utils/request'

async login(){
 //1.收集表单项数据
 let {phone,password} = this.data

 if(!phone){
   //提示用户
   wx.showToast({
     title: '手机号不能为空',
     icon:'none'
   })
   return;
 }
 //定义正则表达式
 let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
 if(!phoneReg.test(phone)){
   wx.showToast({
     title: '手机号格式错误',
     icon:'none'
   })
   return;
 }
 if(!password){
   wx.showToast({
     title: '密码不能为空',
     icon:'none'
   })
   return;
 }
 //后端验证
 let result = await request('/login/cellphone',{phone,password})
 if(result.code === 200){
   //登录成功
   wx.showToast({
     title: '登录成功',
   })
   //将用户的信息存储至本地
   wx.setStorageSync('userInfo', JSON.stringify(result.profile)) //转成字符串
   //跳转至个人中心personal页面
   wx.reLaunch({
     url: '/pages/personal/personal',
   })
 }else if(result.code === 501){
   wx.showToast({
     title:'手机号错误',
     icon:'none'
   })
 }else if(result.code === 502){
   wx.showToast({
     title:'密码错误',
     icon:'none'
   })
 }else{
   wx.showToast({
     title:'登录失败',
     icon:'none'
   })
 }
}

取出

import request from '../utils/request'     

/pages/personal/personal.js  文件

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //读取用户基本信息
    let userInfo = wx.getStorageSync('userInfo');
    //console.log('userInfo：',userInfo)//字符串

    //userId:536011793
    ///user/record?uid=536011793&type=1
    if(userInfo){
      //更新userInfo状态
      this.setData({
        userInfo:JSON.parse(userInfo)
      })
      //console.log(this.data.userInfo.userId)
      //获取用户播放记录
      this.getUserRecentPlayList(this.data.userInfo.userId)
    }
  },

9.杂项

1、封装请求功能函数

由于程序请求通常使用较多所以把请求功能函数封装

代码示例

export default{
host:'http://localhost:3000',
mobilehost:'http://5fdswm.natappfree.cc'
}

//发送ajax请求
/*
1.封装功能函数
1.功能点明确
2.函数内部应该保留固定代码(静态的)
3.将动态的数据抽取成形参，由使用者根据自身的情况动态传入实参

2. 封装功能组件
  1.功能点明确
  2.组件内部保留静态的代码
  3.将动态的数据抽取成props参数,由使用者根据自身的情况以标签属性的形式动态传入props数据
  4.一个良好的组件应该设置组件的必要性及数据类型

*/
import config from './config'             //引用路径配置  拼接

export default(url,data={},method='GET') => {
  return new Promise((resolve,rejext) => {
    // 1.new Promise初始化promise实例的状态为pending
    wx.request({
      url:config.host+url,//本地host    内网穿透mobilehost
      data,
      method,
      success: (res)=>{
        //console.log('请求成功',res);
        resolve(res.data);//reso;ve修改promise的状态为成功的状态resolved
      },
      fail:(err) => {
        //console.log('请求失败',err);
        rejext(err);//rejext修改promise的状态为失败状态 rejected
      }
    })
  })
}

2、内网穿透真机调试

安装环境 node.js 运行本地服务器
找到相应服务器路径 node app.js 启动服务器
在这里插入图片描述
访问
在这里插入图片描述

NATAPP
注册后购买免费隧道
在这里插入图片描述
隧道配置
在这里插入图片描述
新建config.ini 文件

#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
[default]
authtoken=       46b400d3b504d011               #对应一条隧道的authtoken
clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=stdout                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

启动内网穿透
在这里插入图片描述
浏览器输入路径

http://localhost:4040/http/in

获取本次外网地址
在这里插入图片描述
访问
在这里插入图片描述
更改小程序请求路径配置后使用手机端真机调试

3、布局

1)文字 横向滚动 配合组件scroll-view

示例代码

<!-- 导航区域		wxml	-->
<scroll-view scroll-x="true" class="navScroll" enable-flex="true">
   <!--		开启横向滑动		启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。-->
 <view class="navItem">
   <view class="navContent">
   推荐
   </view>
 </view>
 <view class="navItem">
   <view class="navContent active">
   世界上的另一个我
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   推荐
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   世界上的另一个我
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   推荐
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   世界上的另一个我
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   推荐
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   世界上的另一个我
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   推荐
   </view>
 </view>
 <view class="navItem">
   <view class="navContent">
   世界上的另一个我
   </view>
 </view>
</scroll-view>

/*导航区域   wxss*/
.navScroll{
display: flex;
white-space: nowrap;/*规定段落中的文本不进行换行*/
height: 60rpx;
}

.navScroll .navItem {
padding: 0 30rpx;
font-size: 28rpx;
height: 60rpx;
line-height: 60rpx;
}

.navScroll .navContent {
height: 60rpx;
box-sizing: border-box;
}
.navItem .active {
border-bottom: 1rpx solid #d43c33;
}

在这里插入图片描述

2)图片 横向滚动

萧氏萧然
关注
  • 9
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序之个人简历
03-14
微信小程序个人简历制作，传统的简历以一个文档的形式存在，现如今可以借助微信小程序平台制作个性化的简历。<!--index.wxml--> 获取头像昵称 {{userInfo.nickName}} <!-- {{title}} --> <!-- {{motto}} --> <form class='check' bindsubmit='submit'> 我的名字？ <input placeholder='请正确回答问题' background-color:#eee;' bindinput='inputCorrect'> </input> </form> 回答错误！ <button loading='{{loading}}' plain='true' hover-class='button-hover' bindtap='check'
微信小程序 - 弹出键盘遮挡住输入框解决方案
03-29
在开发微信小程序的时候遇到，输入用户名或者手机号以及地址，手机键盘调起来，会把输入框遮挡。 如图： (此图片来源于网络，如有侵权，请联系删除! ) (此图片来源于网络，如有侵权，请联系删除! ) 以上两张图是自己工作中遇到的，此处不要着急，一个属性帮你搞定。 cursor-spacing：指定光标与键盘的距离，单位px或rpx，默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 (此图片来源于网络，如有侵权，请联系删除! ) 微信小程序开发文档api: https://developers.weixin.qq.com/minipr
微信小程序-开发工具-开发文档学习笔记
qq_57508808的博客
02-28 779
介绍了微信小程序的开发工具，以及相关内容
微信小程序开发文档
01-14
微信小程序开发详细资料及文档
微信小程序6位支付密码输入框
01-27
注: 本项目代码仅供参考,不建议使用在生产环境 最近问题: 部分手机input的type=number时，键盘无法弹出 参考: https://developers.weixin.qq.com/community/develop/doc/00046ac5eb48d03c7f48e32ec56800?highLine=键盘 ➢ 6位支付密码组件 微信小程序6位支付密码输入框 component为6位支付输入框组件 index为引用组件的页面 具体参数和事件设置，请参考小程序官方文档-组件 ➢ 参数设置 ➢ 代码片段地址（新增明文/暗文切换） 代码片段地址：wechatide://minicode/uSYM88mq6lYa ➢ 使用请参考官方文档： https://mp.weixin.qq.com/debug/wxadoc/dev/dev
Adafruit_Blinka-8.28.0-py3-none-any.whl.zip
04-22
Adafruit_Blinka-8.28.0-py3-none-any.whl.zip
微信小程序开发学习文档（万字总结，一篇搞定前端开发）
beiye_的博客
12-01 1万+
微信小程序开发学习文档（万字总结，一篇搞定前端开发）
微信小程序开发（超详细保姆式教程）
热门推荐
m0_64875238的博客
11-10 27万+
微信小程序开发（超详细保姆式教程）
第5节：开发微信小程序之文档详解
ybb_ymm的专栏
03-29 860
前面4节，我们讲解了为什么要开这一个专栏，以及第一个小程序Hello World，与其说第一个小程序，不如说微信开发者工具为我们创建了一个基础工程项目！然后，又开发了一个真正实现突破0的小程序——名片小程序。以上这些内容都是我们的看到的比较真实的写照。那么，今天我们看一下， 小程序的官方文档为我们提供了哪些知识内容呢？从上图中，我们可以看到微信小程序主要分为指南、框架、组件、API、平台能力、服务端、工具、云开发、云托管以及更新日志 这么几个大的模块来说明的！
微信开发官方文档部分整理
求生的码农博客
04-30 1481
微信开发官方文档（微信所有功能开发文档的入口） https://developers.weixin.qq.com/miniprogram/dev/framework/ 微信支付 微信支付开发文档 https://pay.weixin.qq.com/wiki/doc/api/index.html 微信小程序支付 https://pay.weixin.qq.com/wiki/doc/api/wxa/...
微信小程序开发文档之入门
weixin_73644631的博客
01-28 1067
ApplicationProgrammingInterface，程序之间的接口，可以理解为程序之间的合约，具体可以看API是什么: 一篇讲透API - 知乎 (zhihu.com)使用多个 API 构建的，Document Object Model,文档对象模型。例如：你有个笔记本（有HTML代码的网页），每一页都有不同的事项和信息。DOM就是用来查看，编辑这些事项的方式。通过DOM，可以轻松地翻阅笔记本，找到特定的页面（元素），并在需要时修改或添加新的内容。就像用笔(DOM)在纸（文档）上写东西一样。
微信小程序整合的一套UI库
05-10
微信小程序组件如此之丰富、你还需要重量级的组件库来冗余代码吗？ 所以只需要Wa-UI这个轻量级的库很快捷的做布局就可以了 ##使用须知 import引入即可使用，快速开始 Wa-UI说明文档请参考Wiki IDE更新2800版本之后外部字体icon暂时不能用了，可以使用官方icon和图片替代 ###展示 栅格（想要几几分？） 列表 目前样式 列表 微信小程序组件如此之丰富、你还需要重量级的组件库来冗余代码吗？ 所以只需要Wa-UI这个轻量级的库很快捷的做布局就可以了 ##使用须知 import引入即可使用，快速开始 Wa-UI说明文档请参考Wiki 表单 按钮三种大小 按钮六种颜色 input默认样式 input横向 input堆叠 带icon的input（icon暂停使用） 带icon的button（icon暂停使用） 布局 row&col基于flex的网格布局 grid-view 基于float的九宫格布局
Adafruit_Blinka-8.28.1-py3-none-any.whl.zip
04-22
Adafruit_Blinka-8.28.1-py3-none-any.whl.zip
grubby-8.28-25.el7.x86_64.rpm
11-30
离线安装包，亲测可用
电脑软件IP Tools-v8.28.rar
10-23
电脑软件IP Tools_v8.28
grubby-8.28-26.el7.x86_64.rpm
12-14
官方离线安装包，亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
微信小程序实现蓝牙连接通讯
最新发布
qq_41687299的博客
04-23 269
微信小程序连接蓝牙
基于微信小程序的图书馆座位预约系统的设计与实现
No_Name_Cao_Ni_Mei的博客
04-22 572
本文主要介绍了基于微信小程序的图书馆座位预约系统的设计与实现。随着图书馆座位需求的增加，传统的人工管理方式已经无法满足用户的需求。因此，设计并实现一个高效的座位预约系统具有重要意义。首先，本文对图书馆座位预约系统的需求进行了分析。通过调研用户的座位预约习惯、座位类型和预约规则等，确定了系统的功能模块和实现目标。系统的主要模块包括用户登录模块、座位浏览模块、座位预约模块以及管理模块。接着，本文详细介绍了微信小程序的设计与实现过程。借助微信小程序的便利性和开发工具的支持，开发者能够快速搭建座位预约系统。
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 3214
如果还要不懂运行不出效果可以私信博主
微信小程序顶部导航栏超链接
05-18
微信小程序的顶部导航栏可以设置为超链接，让用户点击后跳转到其他页面或网站。 要设置顶部导航栏为超链接，需要在app.json中进行配置，具体操作如下： 1. 在app.json文件中，找到"pages"字段，添加要跳转的页面路径，如： ```json { "pages": [ "pages/index/index", "pages/about/about", "pages/contact/contact" ], "window": { "navigationBarTitleText": "微信小程序导航栏", "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#000000" } } ``` 2. 在要跳转的页面中，使用navigator组件来实现超链接，如： ```html <navigator url="/pages/about/about">关于我们</navigator> <navigator url="https://www.example.com">官网</navigator> ``` 其中，url属性可以是小程序内部的页面路径，也可以是外部网站的链接地址。 注意：使用外部链接时，需要在app.json文件中设置"appid"和"navigateToMiniProgramAppIdList"字段，才能跳转到其他小程序或公众号。具体配置方法请参考微信小程序官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值