微信小程序的基础学习(-)

微信小程序官网 - https://mp.weixin.qq.com/cgi-bin/wx

1.创建微信小程序环境

       官网下载安装微信小程序开发工具 

       若是想用vscode进行安装 插件-wxml,minapp

       安装完成后，新建小程序

       APPid - 若有已经注册账号，在微信小程序中进-开发-开发设置-找到

                 - 若无，可以自动生成测试的APPid

 

2.微信小程序的文档结构解析

       -Pages    --- 小程序的所有页面

          -index

             -index.wxss      -- index样式 == css文件

             -index.wxml      --index结构

             -index.js           --index行为

             -index.json       -- index配置文件

     -Utils      --- 工具函数文件

    -app.js    ---  入口文件

    -app.json  --- 整个项目的配置文件

    -app.wxss  --- 整个项目的样式文件

 

3.小知识点

     小程序开发提出了一个新的单位 rpx ,它规定了所有的屏幕都是750rpx

 

4.常用的xml基本标签和指令

    基本标签

        (1) view -  类似与div

     （2）text -  标记文本标签

       (3) button - 按钮标签

       (4) navigator - 链接标签，可进行跳转页面

   指令

     （1 遍历 wx:for ,wx:key   ==  v-for :key

       (2) 判断  wx:if  ==   v-if

     （3 绑定事件  bind + 事件名   - 会有事件冒泡

                            catch + 事件名  -阻止事件冒泡

  xml文件

<view>
   <!-- list为data中数据，遍历自动有index，item，item代表遍历的每一项数据 -->
   <view wx:for='{{list}}' wx:key='{{index}}'>
      <text>{{item}}</text>
   </view>
   
   <view wx:if='{{name == 'aa'}}'>我是aaa</view>

   <!-- 链接 -->
   <navigator url="/pages/list/list"></navigator>

   <text>{{name}}</text>
   <!-- 绑定事件 -->
   <button bindtap = 'changeName'>按钮</button>
</view>

 

5.js文件常用属性

    js文件格式

Page({
    //用于存放数据 - == vue中的data,在页面用{{}}显示
    data:{
        name:'aaa',
        list:[1,2,5,8,10]
    },
    //方法 - 直接与data同级
    changeName(){
        //获取data中的数据
        console.log(this.data.name)
        //修改data中数据的唯一方式
        this.setData({
            name:'bbb'
        })
    },
    //页面一加载就执行这个函数
    onLoad:function(options){
        //options可以拿到其他页面传递过来的数据
    },
    // 页面出现在前台时执行
    onShow(options){},
    // 页面从前台变为后台时执行   
    onHide(options){}    
})

   常用的api

      (1) wx.login  _ 登录时候获取权限
        
           小程序登录流程
           通过wx.login获取微信官方给与的登录凭证(code)=》将code通过后台登录接口发送后台
           =》后台会返回一个类似于token的东西openid =》存储到持久化中（wx.setStorageSync）
     
      wx.login({
        success (res) {
            if (res.code) {
            //发起网络请求
            wx.request({
                url: 'https://test.com/onLogin',
                data: {
                code: res.code
                }
            })
            } else {
            console.log('登录失败！' + res.errMsg)
            }
        }
    })

   (2)路由跳转
    wx.navigateTo({
      url: 'test?id=1',})

   (3)显示数据未显示时候转圈圈效果  - 一般用于请求后台数据未返回时
    wx.showLoading({
      title: '加载中',
      })

    setTimeout(function () {
        wx.hideLoading()
    },

   (4) 轻提示-一闪而过
     wx.showToast({
      title: '加载中',
      })

   (5)小程序请求后台
    wx.request({
      url: 'test.php', //仅为示例，并非真实的接口地址
      data: {
         x: '',
         y: ''
      },
      header: {
         'content-type': 'application/json' // 默认值
      },
      success (res) {
         console.log(res.data)
      }
    })

     注意事项：报错：不在一下request合法域名列表
     
              小程序里面发送接口时。必须使用https协议也不是http
              在开发设置中，在开发工具中设置不去检测请求协议
 

6.配置文件

  -app.js

     所有的页面路径都要在这里配置，第一元素代表首页路径
     -"pages":["pages/detail/detail"]
     
       设置小程序的状态栏，导航栏，标题，窗口背景色
     -"window"

       用来配置底部的切换栏目
     -"tabBar":{
        "list":[
            {
               "pagePath": "pages/index/index",
               "text": "首页"
           }, {
              "pagePath": "pages/logs/logs",
              "text": "日志"
            }]
        }
 

 -单页面的配置
    微信小程序-框架-页面配置
     "navigatorBarBackGroundColor": "#fff"
     "navigatorBarTitleText": "首页"

     

7.使用模板

  作用：抽取若干页面的公共结构和样式(一般不包含复杂逻辑)
  使用：
  (1)模板 - 与Pages同级
         新建文件夹- templates （模板存放位置）
                     -myTemp.wxml
                        //name-区分模板的名字
                        <template name='atemp'>
                           <view class='testTemp'>sss</view>
                        </template>
                     -myTemp.wxss
                        .testTemp {
                            color:red
                        }
  (2)引入
    wxml - 
      <import src=''></import>//写路径
      //is - 确定是哪个模板
      <template is='atemp'></template>

    wxss 
      @import '路径';