Part6-1-3 uniapp 项目搭建

项目文件结构

使用 npm 引入 uView UI 插件库

uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

使用 HBuilder 导入插件 [uViewUI](https://ext.dcloud.net.cn/plugin?id=1593)

或者使用 npm 安装相关依赖（推荐使用 npm 安装）

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

`main.js`引入uView库

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

swiper

滑块视图容器

组件 --> 视图容器

web-view

加载外部资源

<web-view :src="url" />

自定义导航栏

{
			"path": "pages/index/index",
			"style": {
				// custorm 取消顶部的 navBar 显示
				"navigationStyle": "custom",
				"enablePullDownRefresh": true
			}
		},

uni.pageScrollTo

uni.pageScrollTo({
	duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
	scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
})

挑战到页面指定位置

const query = uni.createSelectorQuery().in(this);
query.select('#gohere').boundingClientRect(data => {
	uni.pageScrollTo({
		duration:500,
		scrollTop:data.top
    })
}).exec(); 

微信登录

<!-- #ifdef MP-WEIXIN -->
			<view class="p-name" v-if="getUserInfoTag">
				前端交流学习中心欢迎你
			</view>
			<button class="submit-btn" open-type="getUserInfo" @getuserinfo="getWechatUserInfo" v-if="getUserInfoTag">
				<image src="/static/wechat.png" class="wechat-img" />
				<text>一键获取微信信息</text>
			</button>
			<!-- #endif  -->



// #ifdef MP-WEIXIN
			wx.getSetting({
				success: res => {
					if (res.authSetting["scope.userInfo"]) {
						uni.getUserInfo({
							success: res => {
								// 如果用户授权了，则做两件事，第一件事
								this.form.login = res.userInfo.nickName
								this.form.name = res.userInfo.nickName
								this.form.avatar = res.userInfo.avatarUrl
								this.getUserInfoTag = false
							},
							fail: () => {
								console.log('用户未授权！')
							}
						})
					}
				}
			})
			// #endif



// 微信授权
			getWechatUserInfo() {
				uni.getUserInfo({
					success: res => {
						// 进行下一步操作
						this.getUserInfoTag = false
						this.form.login = res.userInfo.nickName
						this.form.name = res.userInfo.nickName
						this.form.avatar = res.userInfo.avatarUrl
					},
					fail: () => {
						console.log('用户未授权！')
					}
				})
			},

1