小程序入门--基础/入门必备知识点/初学者

utils:存放工具性质的模块
app.js:小程序项目的入口文件(项目全局的配置文件)
app.json:小程序项目的全局配置文件
app.wxss:小程序项目的全局样式文件
project.config.json:项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信搜索
【app.json】
pages:用来记录小程序所有页面的路径
window:全局定义小程序所有页面的背景色,文字颜色等
style:全局定义小程序组件所使用的样式版本
sitemapLocation:对应下方的对应json
【project.config.json】
setting:保存编译相关的配置   (点击详情-本地设置-勾选状态与之相对应匹配)
projectname:项目名称
appid:小程序的账号ID
【sitemap.json 】
rules:索引规则
action:"allow" 都允许被索引          “disallow”不允许
page:"*":所有页面
如果不想看到黄色的警告信息-需要projest.config.json的setting中配置字段check SiteMap
页面的.json会覆盖全局的.json
创建一个新的页面:app.json中,直接写路径,可以直接创建页面下的四个文件
修改项目首页:调整pages中的页面顺序   app.json中调整顺序,排第一的是首页
WXML 相当于  HTML
区别① 标签名称不同
HTML(div,span,img,a)
WXML(view,text,image,navigator)
区别②属性节点不同
<a href="#">超链接</a>
<navigator url =“/pages/home/home”></navigator>
区别③提供了类似于Vue中的模板语法
数据绑定-列表渲染-条件渲染
常见的组件:
①view:相当于div
②scroll-view  滚动的列表效果
③swiper:轮播图   swiper-item:轮播图项
image 的mode 属性用来指图片的剪裁和缩放
mode值:scaleToFill (默认值)【不保持】横纵比缩放图片,图片的宽高填满至image元素
        aspectFit 缩放模式【保持】横纵比缩放图片,使图片的长边能完全展示出来--完整的将图片显示出来
        aspectFill 保持纵横缩放图片,只保证图片的短边能完全展示,通常只在水平或者垂直方向是完整的
        widthFix  宽度不变,高度自动变化
        heigthFix  宽度不变,高度自动变化
小程序API的3大分类
【事件监听API】
特点:以on开头,用来监听某些事件的触发
【同步API】
特点1:以Sync结尾的API
特点2:同步API的执行结果,可以通过函数返回值直接获取,错误会抛出异常
【异步API】
特点:类似于jQuery中的$.ajax(options)函数,需要通过succes、fail、complete接收调用的结果
【WXML】语法模板
①在data中定义数据,在WXML中使用数据
例:
(动态绑定内容)
[.js文件中 ]
   data: info='hello word'
[.wxml文件中]
   <view>{{info}}</view>  

这时,页面展示为hello word

  (动态绑定属性)
[.js 文件中] 
 
 data:image=‘111111.png’
[.wxml文件中 ]
 <image src="{{image}}"> </image>   
   (三元运算)
[.js文件中]   
 data:randNum:Math.random()*10      //随机10位数   
 randNum:Math.random().toFixed(2)    //保留2位小鼠
[.wxml文件中]
   
<view>{{randNum}}</view>                          // 查看随机数是什么
<view>{{randNum >=5 ? "大于5":"小于5"}} </view>
    
事件绑定  
类型:tap   绑定方式 bindtap或bind:tap             点击事件相当于click
类型:input   绑定方式 bindinput或bind:input       文本框输入事件
类型:change   绑定方式 bindchange或bind:change    状态改变时触发事件
bindtap点击事件基础
[.wxml文件中]
   <button bindtap="Btn">按钮</button>
[.js文件中]     
与data平级,定义一个按钮点击事件           
  Btn(e){
     console.log(e)
  },
            
bindtap点击事件绑定,实现count+1[
[.wxml文件中]
   <button bandtap="CountAdd">Count+1</button>
[.js文件中]   
//[data]中添加一个count值 ,即:
     count:0
//与data平级,定义一个按钮点击事件
     CountAdd(e){this.setData({                        
//this.setData 是一个方法,可以给页面data中的数据重新赋值
             conut:this.data.count+1
             })
}
事件传参   不能在绑定事件的同时为事件处理函数传递参数
实现传参自增3
[.wxml文件中]  
<button bandtap="CountAdd3" data-liyuadd3="{{3}}">Count+3</button>     
//data-后面加自己取的名,data-放传参的
[.js文件中]
   
//【data】中添加一个count值 ,即:
      count:0
//与data平级,定义一个按钮点击事件
      CountAdd3(e){
          this.setData({
              count:this.data.count+e.targer.dataset.liyuadd3     
//targer.dataset.liyuadd3  固定写法  如果不记得可以先打印e
                    })                                                                    C 
         ountAdd3(e){
                                                                                                     console.log(e)
                }                                                                          }  
// 查看console查找路径
                
bindinput事件绑定
[.wxml文件中]
   <input bindinput="Inptext" style=" border: 1px; color: red;border: 1px solid red;"></input>

[.js中]         

Inptext(e){

     console.log(e.detail.value)     //e.detail.value获取输入框当中最新的值
   }
实现文本框和data之间的数据同步
[.wxml文件中]   
<input bindinput="Inptext" style=" border: 1px; color: red;border: 1px solid red;" value="{{message}}"></input>
.js中         【data】中添加一个message值 ,即:    
message:One Place
        与data平级,定义一个按钮点击事件
        Inptext(e){
           message:e.detail.value
           }
条件渲染
[.wxml文件中]   
<view wx:if="type === 1">AAA</view>
<view wx:elif="type === 2">BBB</view>
<view wx:else>其他</view>
[.js中 ]        【data】中添加一个type值 ,即:            
  type=1
                                                         //输出结果为AAA

<block>控制多个组件的展示和隐藏    不会被渲染成任何组件,只起到包裹的作用

<block wx:if="{{true}}">            if="{{true}}",页面展示  One Two Three   if="{{False}}",页面不展示  One Two Three  
<view>One</view>
<view>Two</view>
<view>Three</view>
</block>
hidden隐藏
[.wxml文件中]   
<view hidden="{{flag}}">   //条件为true则隐藏,false则显示</view>
.js中         【data】中添加一个flag值 ,即:
              flag:true
for循环的基本用法
[.wxml文件中  ]
  <view wx:for="{{Arrey}}">索引是{{index}},item项是{{item}}</view>   // 默认的key是index
[.js中 ]        【data】中添加一个flag值 ,即:
           
   Array:["路飞","山治","娜美"]
手动指定索引和当前项的变量名
.wxml文件中    
<view wx:for="{{Arrey}}" wx:for-index="innnn" wx:for-item="itttt">索引是{{innnn}},item项是{{itttt}}</view>
.js中         【data】中添加一个flag值 ,即:
             
 Array:["路飞","山治","娜美"]
指定key值提高渲染效率
.js中         【data】
                     
 TestList:[
    {id:1,name:"liyu1"},
    {id:1,name:"liyu2"},
    {id:1,name:"liyu3"}
]
.wxml文件中    
<view wx:for="{{TestList}}" wx:key="id">{{item.name}}</view>

数组的格式:["","",""]

列表的格式:[{},{},{}]
rpx实现原理,把宽度分为750个rpx,在不同的手机屏幕上,自适应
1rpx=0.5px=1物理像素   用rpx会自动放大缩小,适用于不同屏幕的适配
样式导入    @import后跟需要导入的外联样式表的相对路径,";"结尾
@import 语法格式
@import + 相对路径 + ;
定义在app.wxss中的样式为全局样式,作用于每一个页面
【下拉刷新】
window配置下拉刷新样式  【全局开启下拉刷新】
app.json   window 加上enablePullDownRefresh:true
指定下拉刷新时窗口的背景色
app.json  window  加上backgroundColor
设置下拉刷新样式
app.json  window  更改backgroundCTextStyle   值为dark(灰色)   值为light(白色)
上拉触底[加载数据]一般不需要修改
app.json   window 加上onReachBottomDistence:100  页面内容距离底部不足100px的时候,会加载下一页内容,默认是50px  
【tabBar】
tabBar数量:最少2个,最多5个
顶部tabBar不显示icon 只显示文本
【tabBar】的6个组成部分
①backgroundColor:tabBar背景颜色
②iconPath:(未选中)时候图片的路径
③selectedIconPath:[选中]时候图片的路径
④borderStyle:上边框颜色
⑤selectedColor:tab上的文字[选中]时的颜色
⑥color:tab上的文字(未选中)时的颜色
小程序只能请求https类型的接口,必须要将接口的域名添加到信任列表中  (右上角详情-->项目配置-->域名信息)
【配置request合法域名】
需求:希望请求 https://www.wscook.cn/域名下的所有接口
步骤:登录微信小程序管理后台->开发->开发设置->服务区域名->修改request合法域名
注意:①小程序只能请求https类型的接口
      ②域名不能使用IP地址或localhost
      ③域名必须经过ICP备案
      ④服务器域名一个月最多可修改5次
      
如果没有提供https的接口,可以临时开启不校验请求域名进行开发。。。
步骤:详情->本地设置->不检验合法域名、web-view(业务域名).......
      
      
发送GET请求  wx.request()方法
[.wxml文件中]
   <button bindtap="FsGet"> 发送Get请求</button>
[.js中]     
 
               FsGet(){
                  wx.request(){
                     url:"地址",
                     method:"GET",                       POST请求只需要更改GET  为  POST
                     data{
                        参数1
                        参数2
                     },
                     success:(res)=>{
                       console.log(res)
                     }                    
                  }
               }

在页面刚加载时请求数据  onLoad方法

[.js中]         

 onLoad:function(opction){
                this.FsGet(),
                this.FsPost()
               }                                        调用GET、POST请求方法

关于跨域和Ajax的说明
跨域问题:跨域问题只存在于Web,由于小程序不是基于 浏览器的,所以小程序中不存在跨域问题
Ajax技术:Ajax的核心是以来于 浏览器中的XMLHttpRequest这个对象,由于小程序的宿主是微信客户端,所以小程序 不能叫‘发起Ajax请求’,应该叫“ 发起网络数据请求”
轮播图属性
indicator-dots:是否显示版面指示点                                   true/false
indicator-color:指示点的颜色                                             #aabbcc/white
indicator-active-color:当前选中的指示点的颜色                  #aabbcc/white
autoplay:是否自动切换                                                      true/false
interval:自动切换时间间隔                                                 1000毫秒
cirular:是否采用衔接滑动                                                    true/false
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值