小程序

当页面配置和全局配置冲突时,优先级最高的就是页面配置。
app.wxss全局样式文件里面定义的选择器,在所有的页面中生效**/

<!-- {{}}是插值表达式,这里面可以直接使用js里面定义的数据 -->

   <!-- wx:for指令:用于循环列表,循环出来的每一项通过item返回。么一项对应的索引,通过index返回。循环列表时,添加wx:key的好处是,奖励列表发生变化时重新渲列表的损耗为更低 --

如何判断使用wx:if和hidden

一般来说,wx:if有更高的切换消耗,而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情境下,用hidden号,如果在运行时条件不大可能改变的时则用wx:if好。

初始渲染消耗:假如说,一共有十个切换按钮,而TA只看前两个,那么这前两个就是初始消耗。(也不知道对不对)

切换消耗:每次切换都要渲染,这就叫渲染消耗,至于为什么只看到了一个,那是因为样式的原因给隐藏了,所以看不见。


跳转页的方法:

<navigator class="addBtn" url="../add/add">+</navigator>


!-- 选择器组件,range-key属性指定选择器中显示内容(从对象身上制定一个属性),range属性制定一个数组(指定一份展示的数据)  bindchange="bindPickerChange" ==>选中器改变事件-->


结构赋值使用{}===>花括号



Picker是从底部弹起的滚动选择器

Range-key 是选择内容,也就是按照相对应的属性来进行内容选择

Value表示选中了range中的第几个(从下标开始)


<view class="add">

    <view class="item">

        <text class="title">标题</text>

        <input class="text" model:value="{{title}}" />

    </view>

    <view class="item">

        <text class="title">分类</text>

        <picker class="text" bindchange="bindPickerChange" range-key="Name" range="{{sections}}">

            <view>

                {{sections[sectionsActiveIndex].Name}}

            </view>

        </picker>

    </view>

    <view class="item">

        <text class="title">答案</text>

        <textarea maxlength="-1" class="text" model:value="{{answer}}"></textarea>

    </view>

    <view class="item">

        <text class="title">解析</text>

        <textarea maxlength="-1" class="text" model:value="{{desc}}"></textarea>

    </view>

    <view class="btn" bindtap="addSubject">添加</view>

</view>


bindPickerChange: function (e) {

        //获取下标的分类

        let index = e.detail.value

        //获取对应的分类编号

        this.data.section_id = this.data.sections[index].Id

        //更新选中的下标

        this.setData({

            sectionsActiveIndex: index

        })

    },

其中, sectionsActiveIndex: index里面的冒号可以理解等于号,也就是将数据赋值给了自己定义的一个类似声明的玩意儿。

 e.detail.value===>这串代码所代表的就是数据里的下标排序。

 this.data.section_id====>这是指ID的顺序,this.data.sections[index].Id这个也是代表着ID的顺序,但其中带的id是指获取和下标匹配的对象。


value-key是:选项对象中,文字对应的key


如何引入Vant数据库

小程序的终端,先创建一个package.js文件(npm init(把它变成一个包,先放一个包的描述文件))(如果文件名是中文,则不能带-y,而且包的文件名不能是大写),然后再在终端输入npm i @vant/weapp -S --production,从而让微信小程序软件支持这个Vant组件的文件,但是小程序并不识别,若要使用,打开小程序右上角的详情按钮,选到本地设置,然后勾选使用npm模块,然后点击左上角的工具按钮,点击里面的npm构建。如果依然不行,则在project.config.js文件里面修改以下两种代码:

"packNpmManually": false,(把false改成true)

"packNpmRelationList": [],(在中括号里面加入:"packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/",这两串代码。)


成功之后接着就是引入Vant文件,在app.json文件里面输入(全局引入(所有的页面都可以用))

"usingComponents": { "van-button": "@vant/weapp/button/index" }

指定页面 在你指定的js文件里面输入"usingComponents": { "van-button": "@vant/weapp/button/index" }

(vant 详情请见https://youzan.github.io/vant-weapp/#/quickstart

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、创建项目 1. 准备工作 注册开发者账号 安装小程序开发工具 创建项目 2. 认识项目目录 pages 是存放...
    温木阅读 3,685评论 0 1
  • 小程序 [if !supportLists]1、[endif]当页面配置和全局配置冲突时,优先级最高的就是页面配置...
    来自胖胖的水牛阅读 1,800评论 0 0
  • 一、创建项目 1、准备工作 微信公众平台注册开发者账号:https://mp.weixin.qq.com/[htt...
    一个想读书的人阅读 5,105评论 0 1
  • 微信小程序文件介绍 pages目录 用于存放所有的页面 utils目录 用于存放工具类文件 app.js是入口文件...
    绯泉阅读 3,762评论 0 1
  • 目录(各种框架通用套路) 一、静态页面 二、生命周期 三、获取数据 四、渲染页面 五、绑定事件 六、路由 七、页面...
    Grayly吖阅读 7,096评论 2 14