项目部署
一、Vscode
1、全局安装Vue-cli
npm install -g @vue/cli
2、 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue my-project
3、选择项目模板
4、运行项目
npm run dev:%PLATFORM%
5、发布项目
npm run build:%PLATFORM%
6、%PLATFORM% 可取值如下
值 | 平台 |
---|---|
h5 | h5 |
mp-alipay | 支付宝小程序 |
mp-baidu | 百度小程序 |
mp-weixin | 微信小程序 |
mp-toutiao | 头条小程序 |
mp-qq | qq 小程序 |
二、HBuilderX
1、创建
2、运行
3、配置路径
第一运行微信小程序会需要配置路径,选如下路径
4、启动端口
微信开发者工具不会默认打开,因此需要开启端口
设置>安全设置
结构(标签and组件)
一、视图容器(部分)
1、view和text和image
view 块级元素
text 行内元素
image 导入图片等于img
二、表单组件(部分)
botton和input
<button type="default">有种点我啊</button>
<input class="uni-input" confirm-type="search" maxlength="10" placeholder="最大输入长度为10" />
样式(全局and私有and组件样式)
1、全局globalStyle
"globalStyle": {
"navigationBarTextStyle": "red",
"navigationBarTitleText": "呵呵",
"navigationBarBackgroundColor": "#000000",
"backgroundColor": "#F8F8F8"
}
2、私有pages>style
{
"path": "pages/pageone/pageone",
"style": {
"navigationBarTitleText": "啦啦啦",
"enablePullDownRefresh": false
}
},
3、组件style
.text {
font-size: 200rpx;
}
行为
1、路由跳转
uni.navigateTo({
url: '../pagetow/pagetow'
})
"tabBar": {
"position":"bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/pageone/pageone",
"text": "日志"
}
]
}
2、数据储存
setinfo() {
const a = 123456
uni.setStorage({
key: 'storage_key',
data: a,
success: function() {
console.log('success');
}
});
},
getinfo(){
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
}
3、请求
uni.request({
url: 'https://blog.csdn.net',
success: (res) => {
console.log(123456);
}
});