小程序

Emilia Zhen大约 4 分钟

新建项目
在详情-本地配置-调试基础库里选择占比最多的库
关闭sitemap索引提示，在project.config.json中setting加入"checkSiteMap": false

微信小程序配置文件

属性名	说明
pages	接受一个数组，每一项都是字符串，来指定小程序由那些页面组成
window	用于设置小程序的状态栏、导航条、标题、窗口背景色
tabBar	tabBar 中的 list 是一个数组，只能配置最少 2 个最多 5 个 tab

生命周期

在 app.js 用 App({})去创建一个应用实例对象

onLaunch	function(option){..} 在整个应用启动时触发，只会触发一次
onShow	function(option){..} 应用程序显示到屏幕上，每次成为焦点状态都会触发
onHide	function(){..}
>onError	function(msg){..} 只能捕获到运行阶段的异常，通常可以在该函数将异常收集以邮件的方式发送给开发者

Page({})创建一个页面实例对象

onLoad	页面加载，这个页面即将要工作了，数据赋值、网络请求的发送可以在此函数中进行
onShow	页面进入焦点状态（前台展示），在页面展示到可视区域之前执行
onReady	当页面上的数据渲染完成，当页面结构已经被渲染完成的时候会执行，如果需要操作页面结构，需要在此函数中进行
>onHide	页面离开可视区域就会执行，页面很可能还在内存中
>onUnload	当页面被销毁掉，页面从内存中销毁时会执行

除了生命周期里面约定的钩子函数，还可以定义任何成员，定义在这里的成员可以在后续每一个页面中共享
getApp()获取全局唯一的应用程序实例对象

VsCode 中编辑

安装插件vscode wxml && vscode-wechat

    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "wxml": "html"
    },
    "files.associtations": {
        "*.wxss": "css"
    }

wxml

<input value="{{msg}}">
<view class="shop-nav">
      <text selectable="true"> {{ msg + 1 }} \n!</text>
      <image style="width:100%" mode="true" src="/images/home.png"></image>
      <navigator url="/pages/shop/shop_cel">shop-cel</navigator>
      <navigator url="/pages/shop/shop" open-type="switchTab">shop</navigator>
</view>

block 只是一个包装元素，不会对界面产生影响

<block wx:for="{{ arr }}" wx:for-index="i" wx:for-item="e" wx:key="i" wx:for-item="itemName">
  <view>{{e.name}}</view>
  <view wx:if="i == 0">A</view>
  <view wx:ifelse="i < 3">B</view>
  <view wx:else>C</view>
</block>
<view hidden="{{AA}}"><view>

this.setData({name:'zs'})修改数据并视图更新

wsx

<text>{{foo.addPostfix(msg)}}</text>
<wxs module="foo">
 module.export ={
   addPostfix:function(data){
      return data+'xx'
   }
}
<wxs>

wsx标签类似于html中的script，可以定义一些行内脚本

wxss

@import 'style/common.wxss';

.shop-nav-item {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

事件

在标签中bindTap="foo"，在js中 data同级写入foo(){}，绑定事件不冒泡用catchTap

<view bindtap="tapHead" data-name="aaa"></view>
-------------
Page({
  tapHead(e){
    console.log(e.currentTarget.dataset.name)
  },
  .......
})

发送请求

发送异步请求不再是WEB的Ajax
没有跨域
请求的地址必须在管理后台
服务器域名必须备案
服务器必须使用 https 协议

创建一个函数，在函数内部返回一个Promise实例
在Promise实例内部进行异步操作
当异步操作成功时，调用resolve函数返回数据

const app = getApp()
function fetch() {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: app.config.apiBase + url,
      success: function (res) {
        resolve(res)
      },
      fail: function (error) {
        reject(error)
      },
    })
  })
}

在app.js中定义

App({
  config: {
    apiBase: 'https://locally.uieee.com',
  },
})

重复操作上拉可能会同时触发多个加载下一页的网络请求；三个网络请求同时发送出去，很有可能后发出去的请求先收到响应，需要节流处理。

组件

在根目录添加components文件夹，新建一个组件名的文件夹，右键选择新建components，输入组件名并回车
编写组件；observers监听数据

<text>{{ storyItem.time }}</text>
<text bindtap="read">{{ readFormate }}阅读</text>
-------------
Component({
  properties: {
    storyItem: {
      type: Object,
    }
  },
  observers:{
    ['storyItem.read'](v){
      this.setData({readFormate : v > 10000 ? (Math.floor(v/10000) + '万') : v})
    }
  },
  data: {
    readFormate: 0
  },
  methods: {
    read(){
      this.triggerEvent('ClickRead','555')
    }
  },
③在Page页面的json文件里，引入组件
{
  "usingComponents": {
    "zhen-story-item": "/components/storyListItem/storyListItem"
  }
}

使用组件

<block wx:for="{{ storyList }}" wx:key="index">
  <zhen-story-item storyItem="{{ item }}" bindClickRead="clickRead"
></zhen-story-item>
</block>
---------------------
clickRead(data){
 console.log(data.deteail)
}