uniapp入門

uniappはvueとウィジェットに基づいて構築されたフレームワークであるため,vueおよびウィジェットのみを記録する. 違う場所を使う
1,hbuilder xは微信ウィジェット開発ツールを使用し、ウィジェット開発ツールのポート番号を開く必要がある.
ウィジェットツール→設定→汎用設定→セキュリティ→ポートオン 
2,連動WeChatウィジェットが失敗した場合は、WeChat開発ツールのウィジェットで手動でuniappプロジェクト/dist/mp-vueプロジェクトを開く必要があります
3、設定ページのh 5の下のドロップダウンリフレッシュスタイルのコードは以下の通りです(特定の場所のスタイルを設定する場合は深いです)

"pages": [ //pages             ，  ：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			        "navigationBarTitleText": "  ",//        
			        "enablePullDownRefresh":true,//      ,
					"backgroundColor": "#007AFF",
					"h5":{
						"pullToRefresh":{
							"color":"red"
						}
					}
			      }
		}
	],

4、スタイル 
app.vueはグローバルスタイルです
他のページコンポーネントはローカルスタイルで、ローカルスタイルはグローバル同名スタイルを上書きします.
5、ドロップダウン・リフレッシュとアップロード
一般的にはグローバル構成とローカル構成に分けられ、一般的にローカル構成が推奨されます.
ドロップダウン・リフレッシュ:

       ：
    pages style              
1，     
{
			"path": "pages/message/message",
			"style":{
				"enablePullDownRefresh": true
			}
		},


vue   
onPullDownRefresh(){
			this.list = [...this.list, 6,7];
			//       
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},1000)
		}

2，                   
 vue   


button

methods:{
			pull(){
				// uni.startPullDownRefresh({
				// 	success:()=>{this.list = [...this.list, 6,7]; console.log(1)},
				// 	fail(){ console.log(2)},
				// 	complete(){ console.log(3)}
				// })
				uni.startPullDownRefresh()
				
			}
		}


**********************
uni.startPullDownRefresh()   uni.stopPullDownRefresh()    api 

アップロード 

1，   style onReachBottomDistance           
{
			"path": "pages/message/message",
			"style":{
				"enablePullDownRefresh": true,
				"onReachBottomDistance": 500
			}
		},

2，       onReachBottom
onReachBottom() {
			this.list = [...this.list, 6,7,8,9,10];
			console.log('loading')
		},

6,キャッシュ 

     6 api，   h5 localstrorage       storage ， 

             ，            ；    

    data: 100    h5       {"type":"number","data":100} 

     


        getStorage
		setStorage
		removeStorage
		getStorageAsync
		setStorageAsync
		removeStorageAsync



getStorage(){
				uni.getStorage({
					'key':'score',
					success(){
						console.log('      ，  ')
					}
				})
			},
			setStorage(){
				uni.setStorage({
					'data':  100,
					'key':'score',
					success(){
						console.log('      ，  ')
					}
				})
			},
			removeStorage(){
				uni.removeStorage({
					'key':'score',
					success(){
						console.log('      ，  ')
					}
				})
			},
			getStorageAsync(){
				uni.getStorageAsync({
					'key':'score',
					success(){
						console.log('      ，  ')
					}
				})
			},
			setStorageAsync(){
				uni.setStorageAsync({
					'key':'score',
					'data':100, 
					success(){
						console.log('      ，  ')
					}
				})
				
			},
			removeStorageAsync(){
				uni.removeStorageAsync({
					'key':'score',
					success(){
						console.log('      ，  ')
					}
				})
				
			},

7、写真をアップロード 

upload
		


	upload(){
			uni.chooseImage({
				count:5,
				success:(e)=>{
					this.imgs= e.tempFilePaths  //         blob    ，         ，     
				}
			})
		},
		preview(current){  //     ，         ，apps   
			uni.previewImage({ 
				current,
				urls: this.imgs
			})
		}

8、条件注記

          
              #ifdef            #endif    

 h5           
1，template   
h5

		    h5
		
    

		       
		
2，js   // 
h5

// #ifdef H5
				console.log('H5')
				// #endif

    
// #ifdef MP-WEIXIN
				console.log("   ")
				// #endif


3，css  /*  */
h5
/* #ifdef H5 */
	.case{
		color:red
	}
	/*  #endif */
    
/* #ifdef MP-WEIXIN */
	.case{
		color:blue
	}
	/*  #endif */

9、ナビゲーション方式

     

1，         
detail

2，          ，          （      home  ）

detail-redirect
3，  tab   ，   tab         （tab        ）
switchTab


      
1，         
detail
goDetail(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			},


2，          ，          （      home  ）
detail-redirect

goDetailRedirect(){
				uni.redirectTo({
						url:'/pages/detail/detail'
				})
			},
3，  tab   ，   tab         （tab        ）
switchTab

	goswitchTab(){
				uni.switchTab({
					url:'/pages/message/message'
				})
			}

10、uni-app uiを使用  ,プラグインメカニズム 
1.ホームページにアカウントを登録し、ログインし、プラグインを選択してhbxにダウンロードし、componentで見ることができます. 
2,局所導入での使用 

  
    
        export default {
            methods: {
                show() {
                    this.$refs.picker.show()
                },
                confirm(e) {
                    console.log(e)
                }
            }
        }

11、パッケージ要求 
リクエストのカプセル化は、vueインスタンスにマウントするには次のように選択します.たとえば、次のようにします.
import  fetchData from '@/utils/fetchData '
Vue.prototype.$fetch = this.fetchData ;
*******
async awaitのawaitはawait promiseだけど必要ない  ,直接promiseの実際の値を取ることができて、この時awaitの後ろは関数体が直接実行することができなくて、関数が実行しなければならなくて、さもなくば1つのpromiseを返します 

let request = ()=> new Promise((reslove,reject)=>{
							setTimeout(()=>{
								reslove(2222)
							},1000)
						})


let getResult = async()=>{
	let result = await request()
				
	console.log(result)
	return result;
}

getResult()

 
12,map,rich-textコンポーネント 
 

map   

  ：