ホームページ > 記事 > WeChat アプレット > WeChat アプレットとページ Wepy フレームワーク レイアウト アプリケーションのケース共有
WeChat アプレットとページ Wepy フレームワーク レイアウト アプリケーションのケース共有
- php是最好的语言オリジナル
- 2018-07-27 15:29:164745ブラウズ
個人的な倫理観が浅いので、不備があったことをお詫び申し上げます。今後も学び、価値ある記事を更新していきますので、皆様のご指摘、修正をよろしくお願いいたします。この記事は WeChat アプレットの学習と Wepy フレームワークのアプリケーションについて説明します。
WeChat アプレットは、ダウンロードやインストールを必要としないアプリケーションであり、中国では企業プロモーションでの人気があり、過去 2 年間でその人気が高まり、企業からの評価が高まっています。ここではその人気については詳しく説明しませんが、私たちが焦点を当てているのは開発の詳細です。そこで今日は、このミニ プログラムを段階的に分析して理解します。
1. 開発の準備
1. まず、WeChat パブリック プラットフォーム https://mp.weixin.qq.com にログインし、ミニ プログラムを選択します。登録していない場合は公開アカウントを登録する必要があります)、ログイン後
「設定」-「開発者設定」でWeChatアプレットのAppIDを確認
注：不可直接使用服务号或订阅号的AppID
2. 開発ツールをダウンロード
下载地址： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197489869
3.プロジェクト
打开并使用微信扫码登录 选择创建“小程序项目” 选择一个要创建项目的文件夹(空文件夹) 输入获取到的 AppID(可以选择不填，但这样会有很多功能受限制) 输入你的项目名
2. 編集サーバー アーキテクチャのレイアウトを理解する
准备就绪后，进入编辑器进行项目编辑。
各ミニ プログラム ページは、同じパスにある同じ名前の 4 つの異なるサフィックス ファイル (index.js、index.wxml、index など) で構成されます。 wxss、index.json。
.js 拡張子付きファイルはスクリプト ファイル、.json 拡張子付きファイルは設定ファイル、.wxss 拡張子付きファイルは HTML の CSS ファイルに相当するスタイル シート ファイル、
.wxml 拡張子付きファイルはページ構造ファイルです。
app.js はページのグローバル関数 js です。グローバル データ (gloableData) とそのページ メソッドはページ内のプロジェクトで呼び出すことができます。
app.wxss のスタイルはページのグローバル スタイルですが、その優先順位は次のとおりです。ローカル ページによって定義されていません。優先度が高くなります。
app.json ファイル内のウィンドウの設定もグローバル設定です。最初のページは、ミニ プログラムを入力するための表示ページです。
{
[
'pages/index', //放在了前面
'pages/logs'
]
}
3. 共通コンポーネントの開発とタグ共有
WeChat アプレットエディターは、独自に提供されたタグのみを使用できます。
view、block タグは p に似たブロックレベルの要素、text タグはspan に似た行レベルの要素、これら 3 つのタグが最も頻繁に使用されます。
H5のフォーム要素にはinputとbuttonの他にswitch、slider、pickerが含まれます。詳しくはコンポーネントAPIをご覧ください。
ページ ジャンプ タグ ナビゲーターはプロジェクト ページ間をジャンプするために使用されますが、Web ページにジャンプできないためリンクではありません (ジャンプには webview タグ
例:
しかし、プロジェクトでは主にイベントクリックを使用してジャンプします
eg: wx.navigateTo({
url:'pages/index?title=navigate'
})もう 1 つの一般的に使用されるタグは、h5 とは異なります。ミニプログラムのimageタグはimageのフルスペルであり、二重タグです
4. 共通命令の開発とイベント共有
vueの場合 デザインパターンはMVVMと同じ データレンダリング{{ data}}
wx:if、wx:elseを判定 例:
wx:forをループ
ミニプログラムイベントバインディングbindtap、catchtap
ループ連番データを取得-x
<!--在wxml中-->
<view class="contents">
<button catchtap="choose" wx:if="{{showBtn}}">选择</button>
<text wx:for="{{arrList}}" wx:key="{{index}}" data-i="{{index}}" data-type="{{item}}" bindtap="selectTab" >{{item}}</text>
</view>//对应的js中
data:{
showBtn:true,
arrList:['apple','pear','orange']
},
choose(){ //选择按钮catchtap的choose事件,catchtap是指点击事件会阻止向上冒泡
this.setData({ //改变data中的showBtn的值
showBtn:false
})
},
selectTab(ev){ //列表上bindtap的selectTab事件,bindtap是指点击事件，但不会阻止向上冒泡
var getAttrType=ev.target.dataset.type;//上面的列表标签里写了data-type，这里就是取到对应上面等于的值
var index=ev.target.dataset.i;//同样的，上面的列表标签里写了data-i，这里就是取到对应上面等于的值
}
onLoad(){//页面加载时
},
onShow(){//页面显示时
}5. ローカル画像の選択、ファイルのアップロード、サーバー側のデータ対話とファイル処理
本地图片选择wx.chooseImage(OBJECT)
图片预览wx.previewImage(OBJECT)
文件上传 wx.uploadFile(OBJECT)
数据请求 wx.request()6. ローカルデータストレージの操作
wx.setStorageSync wx.getStorageSync wx.clearStorageSync
//对应的本地图片选择js
wx.chooseImage({
count: 3, // 默认9,假如传张
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
wx.previewImage({ //对应的图片预览
current: temFilePaths[0], // 当前显示图片的链接
urls: tempFilePaths||[] // 需要预览的图片http链接列表
})
wx.uploadFile({ //对应的图片上传
url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name:"file",
formData:{ //上传的同时携带别的参数
"user":"test"
}
success: function(res){
var data = res.data
//do something
}
})
}
})//数据请求js
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: { //注意你在这里上传图片url参数到后台后台是接收不到的，因为上面有专门上传图片的方法
params1: '' ,
params2: ''
},
header:{
"Content-Type":"application/json"
},
success: function(res) {
console.log(res.data)
}
})//数据储存js
wx.setStorageSync("key","value") //设置要本地存储的key值
wx.getStorageSync("key") //获取本地存储的key
wx.clearStorageSync("key") //上出本地存储的keywepy フレームワークのインストールと使い方の紹介
リンクアドレス https: //tencent.github.io/wep...
全局安装或更新WePY命令行工具 npm install wepy-cli -g 在开发目录中生成Demo开发项目 wepy init standard myproject 接下来三步骤与vue一样 cd myproject npm install wepy build --watch（启动项目） 使用WePY框架后的开发目录结构(主要为src目录的结构，dist目录除外) 组件名后缀 .wpy 组件页面结构与vue结构一样
1. wepy ページとコンポーネント構造の紹介
wepy ページとコンポーネント編集レイアウトは同じ 3 つの構造です
template模板 script脚本 style 样式（也可以外部引入）
ページ ページ インスタンス エクスポート デフォルト クラス MyPage は wepy を拡張します。 page { }
注：page组件需在入口模板app.wpy的pages数组里注册后方可进行页面间跳转
Component コンポーネントインスタンスのエクスポートデフォルトクラス MyPage extends wepy.component { }
メソッド定義 ページの wxml タグのバインドイベントとキャッチイベントは、コンポーネント Pay の WePY
リファレンスのメソッド属性でのみ定義できますコンポーネントに登録されている参照パスに注意する テンプレートの中にある
loopコンポーネントを使う
<!--wepy结构-->
<style type="scss">
</style>
<template>
<button bindtap="showFirstComponent">按钮</button>
<view v-if="show">
<DemoCom></DemoCom> <!--使用组件-->
</view>
<repeat for="{{arr}}" key="index"> <!--循环组件-->
<DemoCom :passdata="item" /> <!--传值-->
<repeat>
</template>
<script>
import wepy from 'wepy'
import DemoComponent from '../components/demoComponent' //比如说这里通过路径引人了demoComponent组件
export default class pageDemo extends wepy.page {
config = {
'navigationBarTitleText': '页面标题',
'navigationBarTextStyle': '#FFFFFF', //头部背景色
'navigationBarBackgroundColor': '#0386FF' //头部字体颜色
};
components = { //注册引入的组件
DemoCom:DemoComponent
};
data = {
show:true,
arr:[
{name:'aa',age:'16'},
{name:'bb',age:'17'},
{name:'cc',age:'c18'}
]
};
methods = {
showFirstComponent(){ //bindtap里面的事件
this.show=!this.show; //在这里data数据的设置、获取与vueJS里面的设置、获取一样
}
};
onLoad(){
};
onShow(){
}
</script>app.wpyでのページコンポーネントの登録を見る
<style>
.mainBgcolor{ /*全局样式全局用*/
background:#ffffff;
}
</style>
<script>
import wepy from 'wepy'
import 'wepy-async-function'
import { aldstat } from './utils/ald-stat'
export default class extends wepy.app {
config={
pages: [ //这里注册的全是pages里面建立的pages.wpy组件，页面之间跳转
'pages/index',
'pages/login',
'pages/companyDetailInfo',
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
globalData = { //全局data 全局用
userInfo: null
}
</script>2. wepyページコンポーネント間の値の受け渡しと通信
方法は3つありますwepy コンポーネント間で値を通信および転送するには:
親コンポーネント => 子コンポーネント (props、$broadcast)、ページ イベント オブジェクトはリレーです
子コンポーネント => 親コンポーネント ($emit、$invoke)、ページ イベントオブジェクトはリレーです
子コンポーネント => 子コンポーネント ( $invoke) 、メソッド内のメソッドではありません 転送の場合、親コンポーネントを子コンポーネントに渡すことにも適用できます
eg：this.$broadcast('parentData',{getData:'aaa'})
this.$emit(sendChildData,{ getData:'aaa' })
this.$invoke('Footer','FooterMethod',{invokeData:'aaa'}) <!--比如在父组件中-->
<script>
import wepy from 'wepy'
import childComponent from '../components/childComponents'
import footerComponent from '../components/footerComponents'
export default class extends wepy.app {
components={
childComponent:childComponent,
footerComponent:footerComponent
}
data={
pData:666,
wantChildData:'',
wantFooterData:''
};
events={
'childData':function(params){ //接收子组件传过来的值
this.wantChildData=params;//params就是传过来的888
},
'footerData':function(params){ //接收子组件传过来的值
this.wantFooterData=params; //params就是传过来的999
}
};
methods={
sendData(){
this.$broadcast('parentData',this.pData);//向子组件发送pData数据
}
}
onLoad(){
};
onShow(){
}
}
</script>
<!--比如在子组件childComponents中-->
<script>
import wepy from 'wepy'
import footerComponent from '../components/footerComponents'
export default class extends wepy.app {
components={
footerComponent:footerComponent
};
data={
wantParentData:'',
cData:888
};
events={
'parentData':function(params){ //接收父组件传过来的值
this.wantParentData=params; //params就是传过来的666
}
}
methods={
sendData(){
this.$emit('childData',cData);//向父组件发送cData数据
},
sendFooterData(){
this.$invoke('footerComponent',FooterMethod,{cDatas:this.cData}); //footerComponent指要往哪个组件传值，
//FooterMethod是footerComponent里定义的方法(注意不是methods里面的)，
//最后的对象是要传递的东西，也可以是某个值
}
}
onLoad(){
}
onShow(){
}
}
</script>
<!--比如在子组件footerComponents中-->
<script>
import wepy from 'wepy'
import childComponent from './childComponents'
export default class extends wepy.app {
components={
childComponent:childComponent
}
data={
wantParentData:'',
wantCdata:'',
fData:999
};
events={
'parentData':function(params){ //接收父组件传过来的值
this.wantParentData=params; //params就是传过来的666
}
}
methods={
sendData(){
this.$emit('footerData',fData);//向父组件发送fData数据
}
}
onLoad(){
}
onShow(){
}
FooterMethod(params){//params就是接收到的参数对象
this.wantCdata=params.cDatas //这里的params.cData就是从childComponent组件里传过来的888
}
}
</script>props メソッドは vueJS の props と同じですが、ここでは静的値転送と動的値転送に分けられます
<child title="mytitle"></child>
// child.wpy，静态传值
props = {
title: String
};
onLoad () {
console.log(this.title); // mytitle
}props动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。
注意：下文示例中的twoWay为true时，表示子组件向父组件单向动态传值，而twoWay为false(默认值，可不写)时，则表示子组件不向父组件传值。这是与Vue不一致的地方，而这里之所以仍然使用twoWay，只是为了尽可能保持与Vue在标识符命名上的一致性。
// parent.wpy
<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
data = {
parentTitle: 'p-title'
};
// child.wpy
props = {
// 静态传值
title: String,
// 父向子单向动态传值
syncTitle: {
type: String,
default: 'null'
},
twoWayTitle: {
type: String,
default: 'nothing',
twoWay: true
}
};
onLoad () {
console.log(this.title); // p-title
console.log(this.syncTitle); // p-title
console.log(this.twoWayTitle); // p-title
this.title = 'c-title';
console.log(this.$parent.parentTitle); // p-title.
this.twoWayTitle = 'two-way-title';
this.$apply();
console.log(this.$parent.parentTitle); // two-way-title. --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
this.$parent.parentTitle = 'p-title-changed';
this.$parent.$apply();
console.log(this.title); // 'c-title';
console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}OK，至此咱们的微信小程序的简单使用及了解算是分享完了apache php mysql
相关文章：
相关视频：
以上がWeChat アプレットとページ Wepy フレームワーク レイアウト アプリケーションのケース共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。