小程序自学笔记（2/7）

day2：uni-app的基本使用和uview组件的安装和使用

关联笔记
day1：安装开发工具，配置环境

步骤1-3

1. 学习使用小程序设计稿网站：即刻设计
2. 记一些基础的微信小程序语法，才能方便后面转uni
3. 开始uni-app开发

1 即刻设计

网址 https://js.design/f/MHa85t?p=HZEEKv&mode=programmer&linkelement=6pu20FZfsU

选二倍稿和iphone6模拟器的理由

二倍稿：和微信小程序一致
微信小程序开发工具用iphone6模拟器：rpx和px换算方便

• 调整稿宽度：点击整体修改宽度为750px,即二倍稿（一倍稿375）
  
• 切图：点击具体图片可即可，复杂的图层堆叠去找到左侧上层组件再导出
  

2 基础微信小程序语法（附图：学习文档入口）

之后转uni就把wx换成uni

2.1 wxml语法

学习入口：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

• 数据绑定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

• 列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

例子：

<!--wxml-->
<swiper-item wx:for="{{bannerList}}"  wx:key='id' >
   <image src="{{item.pic_url}}"  class="img" >
</swiper-item>

//page.js
Page({

  data:{
    bannerList:[], //页面数据要在data里写初始化
  },
  onLoad(potions){ //加载页面就开始
    //发起网络请求
    wx.request({
      url:'',
      method:'GET',
      success:(res) => {
         console.log('res',res);
         this.setData({
               bannerList:res.data.data.home_pages[0].banners,
          })
      }

})

• 条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

2.2 跳转(路由)的实现两种方式

学习入口:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

进入wxml文件

2.2.1 基于组件 navigator

//wxml
  <view>
   <navigator url="{{ '/pages/detail/detail?id=' + item }}">
    <button type="primary" size="mini"> 组件查看详情 </button>
   </navigator>
   <view>
  

2.2.2 编程api

例子1：写一个跳转详情按钮

//wxml
  </view>
   <button data-id="{{ item }}" bindtap="goDetail">
   api 查看详情 
   </button>
  </view>

//js
  goDetail(event){
    console.log('goDetail', event, event.currentTarget.dataset.id);
    let id = event.currentTarget.dataset.id;
 
    wx.navigateTo({
      url: '/pages/detail/detail?id=' + id,
    })
  },

例子2：写一个返回按钮

通过例子1和例子2比较可知： 跳转具体页面可以使用wx.navigateTo，但是跳转到底部tarbar页面要用专门的apiwx.switchTab

---

3 开始uni-app开发

3.1 打开HBuildX，了解uni工程结构，安装插件

默认模板创建就行

文档入口：https://uniapp.dcloud.net.cn/tutorial/project.html

• 插件列表
  

3.2 运行到微信小程序开发工具上的方法

1. 先去mainfest.json填好自己的小程序appid
2. 点【运行】-【运行到小程序】-【运行设置】填上微信开发者工具的安装目录
   
   

3. 去微信开发者工具 【设置】-【安全设置】-【打开服务端口】
   
4. 然后就可以运行了，点【运行】-【运行到小程序】-【微信小程序】
5. 把跳转出来的微信开发工具里把模拟器换成iphone6，具体原因上面说过（iphone6模拟器的理由），然后把模拟器分离出来方便编程。

3.2 引入uview

文档入口：https://v1.uviewui.com/components/install.html
跟着文档里的安装 —> 配置 步骤走

3.2.1安装

打开控制台输入3条命令

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
pnpm init
// 安装
npm install uview-ui@2.0.36
// 更新
pnpm update uview-ui

3.2.2 配置

1. 引入uView主JS库
   在项目根目录中的main.js中，引入并使用uView的JS库，
   注意这两行要放在import Vue之后。

  // main.js
  import uView from "uview-ui";
  Vue.use(uView);

2. 在引入uView的全局SCSS主题文件
   在项目根目录的uni.scss中引入

  /* uni.scss */
  @import 'uview-ui/theme.scss';

3. 引入uView基础样式
   在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

 <style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
 </style>

4. 配置easycom组件模式
   在根目录pages.json中引入
   需要重启HX或者重新编译项目
   pages.json中一般只能有一个easycom字段，不然需要自行合并多个引入规则。

  // pages.json
  {
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
  }

图示：

3.2.1 重启后使用

找了按钮和搜索框组件测试 成功